z-index_html/css_WEB-ITnose についてわからないこと

では、ページをロードすると何が表示されると思いますか?

設定した幅と高さの赤い四角形を除いて、ほぼ完全に青い画面を想像するのに、それほど時間はかからないと思います。 この赤いボックスは、より想像力があり、このボックスに追加の CSS を設定して他の場所に表示しない限り、ページの左上隅に表示されるはずです。

「だから何? 明白ではないの?」と思われるかもしれませんが、それほど明白ではないのは、なぜ青い背景に赤い四角が表示されるのかということです。 html 要素の上に div 要素が表示されるのはなぜですか? その理由は、それらはすべて積み重ね順序のルールに従っているためです。

たとえば、この単純な例では、通常のフローのサブブロック (例では div) がルート要素 (例では html 要素) の背景と境界線の上に配置されることがルールで規定されています。 。 div 要素がスタックの上位にあるため、一番上にあることがわかります。

上記の例には 2 レベルのスタッキングのみが含まれていますが、実際には、スタッキング コンテキストには次のようにリストされている合計 7 つのスタッキング レベルが存在する可能性があります:

1. 背景と境界線 - スタッキング コンテキストを形成する要素背景と枠線。 カスケード コンテキストの最下位レベル。
2. 負の z-index 値 - スタッキング コンテキスト内で負の z-index 値を持つ子要素。
3. ブロックレベルボックス - ドキュメントフロー内の非インライン、非配置の子要素。
4. Floating Box - 非配置のフローティング要素。
5. インライン ボックス - ドキュメント フロー内のインライン レベルの配置されていない子要素。
6. z-index: 0 —— 位置決め要素。 これらの要素は、新しいカスケード コンテキストを形成します。
7. 正の Z インデックス値 - 要素の位置決め。 カスケード コンテキストの最高レベル。

これら 7 つのスタッキング レベルは、スタッキング順序のルールを構成します。 スタッキング レベル 7 の要素は、レベル 1 ～ 6 の要素よりも高く (ビューアーに近く) 表示されます。 スタッキング レベル 5 の要素は、レベル 2 の要素の上に表示されます。 要素は... になります... わかりました、アイデアは理解できたと思います。

上記の積み重ね順序のルールに初めて出会ったとき、いくつかのことが思い浮かびました。 スタッキング レベル 2、6、および 7 (z-index が言及されているレベル) だけを見ると、これが z-index の理解と一致していることがわかるでしょう。 正の Z インデックス値は、0 の Z インデックス値より 1 レベル高く、負の Z インデックス値より 1 レベル高くなります。 ただし、これはおそらく私たちのほとんどがこれらの層について考えるのをやめてしまう場所でもあります。

これらのルールを見る前は、他のものはすべてゼロ値の z-index と同じだと思っていました。明らかにそうではありません。 実際、ほとんどすべてのものは、z-index 0 よりも低いスタック レベルにあります。

また興味深いのは、位置決めされていない要素が 4 つの異なるカスケード レベルに分散されていることです。 しかし、考えてみれば当然のことです。 すべての非配置要素が同じスタッキング レベルにある場合、div (ブロック レベルのボックス) 上にテキスト (インライン ボックス) は表示されません。

包括的な概要

この記事では、新しいカスケード コンテキストの作成と形成について何度も言及しました。 auto 以外の z-index 値を要素に割り当てると、他のスタッキング コンテキストから独立した新しいスタッキング コンテキストが作成されます。

テーブルをスタッキングコンテキストとしてもう一度考えてみましょう。 以前は、テーブルに 4 つの立方体、ガラス、フルーツの皿が置かれていました。 この 2 番目のテーブルにも同じサイズの正方形が 4 つあり、その上にガラスが置かれていますが、フルーツボウルは置かれていないと想像してください。

最初のテーブルにあるフルーツ皿が部屋で一番高いものだと間違いなく思うでしょう。 これはスタックの最上位層にある (最大の Z インデックス値を持つ) ためです。 しかし、最初のテーブルとその上にあるすべてのものを地下に移動したらどうなるでしょうか? 最初のテーブル自体が 2 番目のテーブルよりも低い層に移動されたため、フルーツ ボウルは 2 番目のテーブルのすべてのテーブルよりも低くなります。

Web ページ上の要素の配置についても同様です。 次の Web ページとスタイルを考えてみましょう。 div.two は div.4 の上に表示されますか、それとも下に表示されますか?

HTML:

<div class="one">  <div class="two"></div>  <div class="three"></div></div><div class="four"></div>

CSS:

div {  width: 200px;  height: 200px;  padding: 20px;}.one, .two, .three, .four {  position: absolute;} .one {  background: #f00;  outline: 5px solid #000;  top: 100px;  left: 200px;  z-index: 10;} .two {  background: #0f0;  outline: 5px solid #000;  top: 50px;  left: 75px;  z-index: 100;}.three {  background: #0ff;  outline: 5px solid #000;  top: 125px;  left: 25px;  z-index: 150;}.four {  background: #00f;  outline: 5px solid #ff0;  top: 200px;  left: 350px;  z-index: 50;}

div.two の z-index (100) は大きいですが、実際には同じページ上で div.four (z-index 50) よりも下に位置します。 上記のコードの結果を下の画像で確認できます。 黒と黄色の境界線は、各要素が配置されているさまざまなスタッキング コンテキストを示します。

div.two は div.one に含まれているため、その z-index 値も div.one のスタッキング コンテキストに相対的です。 実際、実際に得られる結果は次のとおりです。

• .one — z-index = 10
• .two — z-index = 10.100
• .three — z-index = 10.150
• .four — z- Index = 50

私たちが行ったことは、実際に div.one とそれに含まれるすべてのものを div.four の下に置くことです。 div.one の要素にどのような Z-index 値を設定しても、要素は常に div.4 の下に表示されます。

あなたが私と同じなら、z-index を扱うときに一度や二度は騙されたことがあるかもしれません。 これらの例が、大きい z インデックスを持つ要素が小さい z インデックスを持つ要素の背後に表示される場合がある理由を理解するのに役立つことを願っています。

結論

初めて z-index に出会ったとき、それは非常にシンプルで理解しやすいプロパティのように思えます。 その値は、画面の内外を向いた軸上の位置を表すものであり、それ以外の何ものでもありません。

そして、z-index を徹底的に調査すると、z-index の背後で多くのことが起こっていることが明らかになります。 どの要素が最上位でどの要素が下であるかを決定するスタッキング コンテキスト、スタッキング レベル、スタッキング順序ルールが含まれます。

要素を配置すると、新しいスタッキング コンテキストも作成され、このスタック全体が別のスタッキング コンテキストのすべてのスタックの上または下に表示されます。

詳しい読み物

• Philip Walton による z-index について他の人が教えてくれないこと
• z-index CSS プロパティ: Smashing Magzine に掲載された包括的な調査
• CSS の位​​置決めについてどの程度深く理解していますか?
• Mozilla Developer Network に投稿されたカスケード コンテキスト
• z-index と CSS カスケード: どの要素が最初に表示されますか?