无法在相对格上重叠位置绝对格

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; 
    }