どのようにして、より高いスタッキングコンテキストで要素をオーバーラップさせることができますか？

Question

このexampleでは、Div＃4、Div＃5、およびDiv＃6をDiv＃1よりも高くする方法はありますか？私は、同じスタッキング・コンテキスト内の内のZインデックスのみが適用されると読んでいます。ここでは、Div 4,5、および6はDiv 3のスタッキングコンテキスト内にあります。

hereと表示されているように、メイン区域 leftプロパティを10％のように変更すると、子要素がbody要素によってオーバーラップしています。

main div { 
    background: black; 
    color: white; 
    width: 50%; 
    transform: translate(-50%, -50%); 
    position: absolute; 
    top: 50%; 
    left: 10%; 
    padding: 20px; 
    resize: both; 
    overflow: auto; 
} 

「上位の」スタッキングコンテキストで他の要素が重なるような方法はありますか？

Answer 1

はstatic除き、z-index高いまたは#1年代及び任意position値と等しい#2を与えます。 （あなたが#2のz-index5に変更すると、それは#2のすべての子どもたちが#1の上にレンダリングようになります。）z-indexとstacking contexts here上

より。また、スタック内の異なるz-index値を動的に循環させて何が起こるかを視覚化できるおもちゃ（スニペット）を作成しました。

#2の子どもたちが#1上にレンダリングすることのもう一つの方法は、#1にposition:staticを設定することです。この方法では、z-indexは適用されなくなります。