Impossible de superposer la position absolue div sur la div relative

Question

Je veux que ma boîte jaune se chevauche sur la boîte rouge. Moyens partie de la boîte rouge devrait se cacher derrière la boîte jaune. Même l'indice z de la boîte jaune est plus élevé que la boîte rouge. est inférieure à la 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

Toute aide serait très appréciée.

Answer 1

Position absolue par rapport à la div. Vous pouvez rendre le div rouge absolu et le montrer derrière un div jaune

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