相対的なdivより絶対位置divをオーバーラップできません

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の後ろに表示することができます

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