絶対配置されたdivを1つの通常divと重複するように設定します。

Question

分割された区画で設定されたページがあります。上部divは絶対高度に配置されていますdivは上のdivをオーバーレイします。 HTML +

<div id="everything"> 
    <div id="top"> 
     <div id="free"></div> 
    </div> 
    <div id="bottom"></div> 
    </div> 
</div> 


#everything { 
    width: 400px; 
    height: 400px; 
} 

#top { 
    height: calc(50%); 
    width: 100%; 
    background: blue; 
} 

#free { 
    position: absolute; 
    top: 50px; 
    left: 300px; 
    height: 200px; 
    width: 50px; 
    background: yellow; 
    border: 3px solid black; 
} 

#bottom { 
    height: calc(50%); 
    width: 100%; 
    background: rgba(0,255,0,0.6); 
} 

https://jsfiddle.net/b2mb79ev/1/から以下のCSSは、しかし、私は底のdiv内に侵入しないように、絶対位置のdivをしたいです。下のdivが常に「上位」のレイヤーになるようにします。 jsfiddleでは、私は黄色のビットが緑色のビットに入ることを望んでいません。

しかし、トップとボトムのdivは常に同じレベルになります。なぜなら、それらはちょうどフローされた要素であり、Z-インデックスの通知を受けないからです。私はz-indexを使って、絶対的に配置されたdivを両方の上または下の両方に置くことができますが、上と下のどちらも下にはありませんか？

私は何をしたいのですか？

Answer 1

#bottom divに静的でない位置（例：position:relative）を設定すると、後でstacking contextとなります。

jsFiddle example

#bottom { 
    height: calc(50%); 
    width: 100%; 
    background: rgba(0, 255, 0, 0.6); 
    position:relative; 
}