設定した Z インデックスが有効にならないのはなぜですか?

誰もが CSS の z-index プロパティに精通していると思います。これは通常、2 つ以上の要素が重なっている場合に、それらの要素間の表示 (カスケード) 順序を制御するために使用されます。

z-index が設定されているのに有効にならないのはなぜですか?

この例を見てみましょう。box1の z-index がbox2の z-index 値より大きく設定されているのはなぜですか。また、box1 が box2 の上に表示されないのはなぜですか。

/* css */
.box1{
    
    
    z-index: 10;
    background-color: red;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

ここに画像の説明を挿入

カスケードコンテキスト

設定した z-index が有効にならない理由は、設定した要素がスタッキングコンテキストを形成しないためです。では、スタッキングコンテキストとは何でしょうか? 通常の状況では、html 要素は左右に配置されていることがわかります。これは、x 軸と y 軸に沿って配置されているのと同じです。次に、カスケードコンテキストによって、 z軸の概念が導入されます。ブラウザーに面している場合(ページ)、ブラウザとユーザーの間の線は Z 軸です。
要素が積み重ねコンテキストを形成する場合、z-index の値を設定して、z 軸上の要素の積み重ね順序を制御し、要素間を「カバーする」効果を実現できます。

カスケードコンテキストを生成する

カスケードコンテキストは、次の共通プロパティを通じて生成できます。

位置の値は静的ではありません (値が絶対または相対の場合、z-index を自動にすることはできないことに注意してください)
display: flex; レイアウトの子要素、および z-index の値を auto にすることはできません
表示: グリッド; レイアウトの子要素、および z-index の値を auto にすることはできません
不透明度値が 1 未満の要素
変換の値はなしではありません
視点の価値は無いわけではない
フィルタの値が none ではありません

例を見てください。position の値が設定されているため、z-index の値は有効です。

<!-- css -->
.box1{
    
    
    z-index: 10;
    background-color: red;
    position: relative;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

ここに画像の説明を挿入

やっと

例を見てみましょう:

/* css */
.box{
    
    
    width: 200px;
    height: 100px;
    background-color: red;
    color: #fff;
    z-index: 5;
    position: relative;
}
.box1{
    
    
    width: 120px;
    height: 50px;
    background-color: green;
    color: #fff;
    position: relative;
    z-index: 10;
}
.box2{
    
    
    width: 120px;
    height: 50px;
    background-color: rgb(70, 0, 128);
    color: #fff;
    position: relative;
    z-index: 7;
    margin-top: -10px;
    padding-top: 10px;
}
.box3{
    
    
    width: 120px;
    height: 100px;
    background-color: blue;
    color: #fff;
    margin: -70px 0 0 90px;
    position: relative;
    z-index: 6;
    text-align: right;
}
/* HTML */
<div class="box">
    <div class="box1">z-index: 10</div>
    <div class="box2">z-index: 5</div>
</div>
<div class="box3">z-index: 4</div>

ここに画像の説明を挿入

box、box1、box2、box3 はそれぞれスタッキングコンテキストです。box のスタッキングコンテキストには box1 と box2 が含まれており、スタッキングコンテキストにスタッキングコンテキストを含めることができることを示しています。
box の z-index 値は box3 の z-index 値より小さいため、box3 はボックスを覆い、上層に表示されますが、box1 と box2 の z-index 値は z-index 値よりも大きくなります。 box3 のインデックス値ですが、それらも box3 でカバーされて下層に表示されます要素の重なり関係は親要素によって制限されます、つまり、2 つの要素の重なり順は z-index サイズの影響を受けません子要素の。

ヒント: 要素がカスケードコンテキストを形成しているかどうかを確認するにはどうすればよいですか?

Edge ブラウザーツール、F12 を使用して、[3D ビュー]タブを選択します。下図のオプションを確認し、要素にz-index値がある場合、スタッキングコンテキストが形成されていることを意味します。

ここに画像の説明を挿入