無法在相對格上重疊位置絕對格

Question

我希望我的黃色格在紅色格上重疊。意味着紅色盒子的一部分應該隱藏在黃色盒子後面。即使黃色框的z-索引高於紅色框。 下面是的jsfiddle

<div style="width:40px;height:100px;"> 
<div id="relative"> 
    <div class="absolute">yellow</div> 
</div> 
<div id="relative" style="top: 54px">red</div> 
</div> 

#relative { 
    position: relative; 
    /* width: 40px; */ 
    height: 80px; 
    background: #f00; 
    z-index: 0; 
    /* margin-top: 30px; */ 
} 
.absolute { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 12; 
    width: 200px; 
    height: 150px; 
    background: yellow; 
} 

JSFIDDLE

任何幫助將高度讚賞。

Answer 1

相對於上面div的絕對位置。您可以將紅色div絕對化並顯示在黃色背後

<div style="width:40px;height:100px;"> 
    <div id="relative"> 
     <div class="absolute">yellow</div> 
     <div style="position:absolute; top: 130px; background: #f00; height: 80px;">red</div> 
    </div>  
</div> 

#relative { 
     position: relative; 
    } 
    .absolute { 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 12; 
     width: 200px; 
     height: 150px; 
     background: yellow; 
    }