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

CSS の z-index プロパティは非常に単純に見えますが、それがどのように機能するかを本当に理解したい場合は、単純な表面の下に探索する価値のあることがたくさんあります。 このチュートリアルでは、スタッキングコンテキストと一連の実践例を検討することで、z-index の内部動作を明確にします。

CSS は、ボックス モデルのレイアウトに対して 3 つの異なる配置スキームを提供します:

• 通常のドキュメント フロー
• フローティング
• 絶対配置

最後の配置スキームは、通常のフローから要素を完全に削除します。開発者次第です。要素が表示される場所を決定します。

top、left、bottom、right の属性値を割り当てることで、要素を 2 次元の平面に配置できます。さらに、CSS では z-index 属性を使用して要素を 3 次元に配置することもできます。

表面的には、z-index は単純なプロパティのように見えます。 さまざまな値を設定して、3 次元のどこに要素を配置するかを決定できます。これで完了です。 実際には、どのタイプの要素を他の要素の上に配置するかを決定するためのルールなど、検討できることはさらにたくさんあります。

このことを共通理解するために、基本から始めてはどうでしょうか。後で、z-index の舞台裏で何が起こっているのかをよりよく理解するために、カスケードについて少し説明します。

z-index の基本

3 次元座標空間についてはよく知っている必要があると思います。 通常、水平位置を表す x 軸、垂直位置を表す y 軸、紙の内側と外側の位置、またはこの記事の文脈での位置を表す z 軸があります。画面の内側と外側。

3 次元座標空間

画面は 2 次元平面であるため、Z 軸は実際には見えません。 Z 軸が見えると言うとき、実際には、2 次元空間を共有する他の要素の前または後ろに要素を示すことによって、遠近法を通して Z 軸が見えます。

Z 軸に沿って要素がどのように分散されるかを決定するために、CSS では z-index プロパティに 3 つの値を設定できます。

• auto (自動、デフォルト)
• (integer)
• inherit (継承)

ここでは、整数値に焦点を当てましょう。 整数値は正、負、または 0 のいずれかになります。値が大きいほど、要素は観察者に近くなります。 数値が小さいほど、要素はより遠くに表示されます。

2 つの要素が一緒に配置され、2 次元平面上の共通領域を占める場合、より大きな Z インデックス値を持つ要素が、その共通領域内のより低い Z インデックス値を持つ要素を覆うかブロックします。一部の。

上記のロジックは非常に理解しやすく、おそらくあなたの期待と一致すると思います。 それにもかかわらず、まだ答えられておらず、答えを待っている疑問がいくつかあります。

• z-index 値を持つ配置要素が通常のドキュメント フロー内の要素と重なった場合、誰が一番上に配置されますか?
• 配置された要素と浮動要素が重なった場合、誰が一番上に配置されますか?
• 位置決めされた要素が他の位置決めされた要素内にネストされている場合はどうなりますか?

これらの質問に答えるには、z-index がどのように機能するか、特にコンテキストの積み重ね、レイヤーの積み重ね、および順序の積み重ねの概念をさらに理解する必要があります。

コンテキストの積み重ねとレイヤーの積み重ね

コンテキストの積み重ねとレイヤーの積み重ねは、概念化するのが少し難しい場合があるので、ここでは、多数の項目が含まれるテーブルを想像してみましょう。 このテーブルはカスケード コンテキストを表します。 最初のテーブルの隣に 2 番目のテーブルがある場合、2 番目のテーブルは別のカスケード コンテキストを表します。

スタッキングコンテキスト 1 はドキュメントルート要素によって形成されます。 スタッキング コンテキスト 2 と 3 (スタッキング コンテキスト 2、3) は両方とも、スタッキング コンテキスト 1 (スタッキング コンテキスト 1) 上のスタッキング レイヤーです。 それらはそれぞれ、新しいオーバーレイ レイヤーを含む新しいオーバーレイ コンテキストも形成します。

ここで、最初のテーブルに 4 つの小さな正方形があり、それらはすべてテーブル上に直接配置されていると想像してください。 これら 4 つの小さな正方形の上にガラス片があり、そのガラス片の上に果物の皿があります。 これらの正方形、ガラス片、フルーツボウルはそれぞれ、積み重ねられたコンテキスト内の異なる積み重ねられた層を表しており、この積み重ねられたコンテキストがテーブルです。

すべての Web ページには、デフォルトのカスケード コンテキストがあります。 このスタッキング コンテキスト (テーブル) のルートは html 要素です。 html タグ内のすべては、このデフォルトのスタック コンテキストのスタック (テーブルに配置されるアイテム) に配置されます。

要素に auto 以外の z-index 値を指定すると、ページ上の他のスタッキング コンテキストやスタッキング レイヤーから独立したスタッキング レイヤーを含む新しいスタッキング コンテキストが作成されます。 部屋に別のテーブルを持ち込んでいるようなものです。

重なり順

重なり順を理解する最も簡単な方法は、簡単な例を使用して説明することです。この例は非常に単純なので、当面は要素の配置についても考慮しません。

非常に単純な Web ページを想像してください。 デフォルトの 100db36a723c770d327fc0aef2ce13b1 、 93f0f5c25f18dab9d176bd4f6de5d30e 要素に加えて、 dc6dce4a544fdca2df29d5ac0ea9906b 要素があります。 CSS ファイルで、html 要素に青色の背景色を設定します。 div 要素には、幅、高さ、背景の赤色を設定します。

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

設定した幅と高さの赤い四角形を除いて、ほぼ完全に青い画面を想像するのに、それほど時間はかからないと思います。 この赤いボックスは、より想像力があり、このボックスに追加の 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 つのスタッキング レベルは、スタッキング順序のルールを構成します。 スタッキング レベル 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 カスケード: どの要素が最初に表示されますか?