Zインデックス0の要素がIコード（例）下記たZインデックス1

Question

持つ要素の上に示されている理由：私にとって

<div style="position: fixed"> 
 
    <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div> 
 
</div> 
 
<div style="position: relative"> 
 
    <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div> 
 
</div>

をAAAのDIVを示さなければならないように見えますBBBのdiv要素の上に、ため：彼らの両方が指定された位置を持っており、この位置は、zインデックス

AAAのzをサポートしています

• -index（1）はBBB z-index（0）よりも高いです。

しかし、結果HTMLではBBBがAAAで表示されます。どうして？この動作を記述する文書はありますか？

Answer 1

親のpositionとz-indexが新しい積み重ね順序を開始するためです。具体的には、最初の要素のposition: fixed。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

スタッキングコンテクストは、次のシナリオで任意の要素によって、どこでも文書に、形成されている：

...位置値「固定」または（「粘着性」と

要素すべてのモバイルブラウザでは固定ですが、古いデスクトップでは表示されません）。

したがって、最初のdivの子Zインデックスは、ドキュメントの残りの部分ではなく親を基準にしています。

この例では、代わりにz-indexを親に適用したいとします。

<div style="position: fixed; z-index: 1;"> 
 
    <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div> 
 
</div> 
 
<div style="position: relative;"> 
 
    <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div> 
 
</div>