HTML の Web ページは、テキストや画像などの要素が順番に配置されているため、直感的には 2 次元のように見えますが、実際の Web ページは 3 次元であり、要素間にスタッキング (重なり) が発生することがあります。 CSS を通じて、z-index プロパティは要素の積み重ね順序を設定します。
1. z-index属性の意味
ドキュメント内の要素のスタック順序。現在のスタック コンテキストでの要素のスタック レベルを確認するために使用されます。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。
(1) z-index 属性値が大きいほど、値は高くなります。
(2) 要素は負の z-index 属性値を持つことができます。
(3) z-index と特定の数値。
(4) z-index の値が単位に従っていません。
以下に示すように:
上の図に示すように、このプロパティの名前は座標系から派生しています。ここで、x 軸は左から右、y 軸は上から下です。画面からユーザーまでが Z 軸です。この座標系では、z インデックス値が高い要素は、z インデックス値が低い要素よりもユーザーに近くなります。つまり、z インデックス値が高い要素が最初にユーザーの視野に表示されます。 、その結果、z インデックス値が高い要素が他の要素をカバーするようになり、スタッキングまたはスタッキングとも呼ばれます。
z-index 属性を使用して、より複雑な Web ページ レイアウトを作成できます。z-index 属性のオプションの値を次の表に示します。
要素の階層関係については次の注意事項があります。
(1) 位置属性が設定されていない要素、または位置属性の値が静的である場合、後から定義された要素が前の要素を上書きします。
(2) 位置属性が設定されており、その属性値が静的ではない要素の場合、これらの要素は、位置属性が設定されていない要素、または位置属性値が静的である要素を上書きします。
(3) Position 属性値が静的ではなく、z-index 属性が定義されている要素の場合、z-index 属性値が大きい要素が、z-index 属性値が小さい要素、つまり z が大きい要素を上書きします。 -index 属性値、優先度が高くなります。高、z-index 属性値が同じ場合、後で定義された要素が以前に定義された要素を上書きします。
(4) z-index 属性は、要素が位置属性を定義し、属性値が静的でない場合にのみ有効です。
2.z-index適用例
例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; font-size:50px;line-height:200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head>< body><!--Z-index カスケード原則: 1. 同じレベル (またはposition:static) の要素の場合、デフォルトでは、ドキュメント フローの後ろにある要素が前の要素を上書きします。 (後ろから来る) 2. 同じレベルの要素について、位置が静的でなく、z-index が存在する場合、より大きな z-index を持つ要素が、より小さな z-index を持つ要素をカバーします。つまり、より大きな z-index を持つ要素がカバーされます。 z-index が大きいほど優先順位が高くなります。 --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color: blue;z-index:-1;>C</div></body></html>実行結果:
z-index に関するいくつかの誤解
一般に、z-index 属性は、位置指定された要素 (位置が静的ではない要素) で使用される場合にのみ機能すると言えます。まず、このステートメントは間違っています。なぜなら、CSS3 では、フレックス ボックスの子要素も使用できるからです。 z-index 属性を設定します。