CSS における重要なカスケード概念の詳細な説明

最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表示されるようにしたいのですが、その時はz-indexの設定がうまくいきませんでした。原因がわからなかったので、CSSスタッキングに関する情報を見つけてこの問題を解決しました。ここに記録があります〜

画面は 2 次元の平面ですが、HTML 要素は 3 次元の座標系に配置されます。x は水平位置、y は垂直位置、z は画面の内側から外側への位置です。画面を見るときは、z 軸に沿って外側から内側に見ます。そのため、ユーザーの観点からは、要素は積み重ね関係を形成します。要素は他の要素を覆ったり、他の要素に覆われたりすることがあります。

重要な概念をいくつか挙げます。スタッキングコンテキスト（スタッキングコンテキスト）、スタッキングレベル（スタッキングレベル）、スタッキング順序（スタッキング順序）、 Zインデックス

声明：

次の位置決め要素はposition:absolute|fixed|relative|sticky
次の非位置指定要素はposition:initial|staticを参照します。
スタックコンテキストに関する同様の概念として、ブロックフォーマットコンテキスト (BFC) があります。CSS の重要な BFC を参照できます。BFC では、ドキュメントフローのコンテンツもいくつか導入されています。
この記事はかなり長いですが、読む勇気があれば、スタッキングに関する基本的な概念を理解できるはずです(～o￣▽￣)～

1. スタックコンテキスト

スタッキングコンテキストは、HTML における 3 次元の概念です。 CSS2.1 仕様では、各要素の位置は 3 次元です。要素が積み重ねられると、他の要素を覆ったり、他の要素に覆われたりすることがあります。Z 軸上の位置が高いほど、画面の観察者に近くなります。

記事「Z-index についてあなたが知らなかったこと」には良い例え話が載っているので、ここで引用します。

たくさんのアイテムが置かれたテーブルを想像してください。このテーブルは積み重ねコンテキストを表します。最初のテーブルの隣に 2 番目のテーブルがある場合、その 2 番目のテーブルは別のスタッキングコンテキストを表します。

ここで、最初のテーブルの上に 4 つの小さな立方体があり、それらはすべてテーブルの上に直接置かれていると想像してください。これら 4 つの小さな四角形の上にはガラスが置かれており、そのガラスの上にはフルーツの皿が置かれています。これらのブロック、ガラス片、フルーツ皿はそれぞれ、積み重ねコンテキスト (テーブル) 内の異なる積み重ねレベルを表します。

すべての Web ページにはデフォルトのスタックコンテキストがあります。このスタッキングコンテキスト (テーブル) のルートは<html></html>です。このデフォルトのスタッキングコンテキストでは、HTML タグ内のすべてのものが 1 つのスタッキングレベルに配置されます (項目はテーブル上に配置されます)。

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

スタッキングコンテキスト 1 は、ドキュメントルート要素によって形成されます。スタッキングコンテキスト 2 と 3 は、スタッキングコンテキスト 1 上のスタッキングレベルです。また、それぞれが新しいスタッキングレベルを含む新しいスタッキングコンテキストを形成します。

スタッキングコンテキスト内では、その子要素は上記で説明したルールに従ってスタックされます。スタッキングコンテキストを形成する方法は次のとおりです。

ルート要素<html></html>
position値はabsolute|relativeであり、 z-index値はautoはない
position値はfixed|stickyです
z-index値がautoではないflex要素、つまり親要素display:flex|inline-flex
opacity度が1未満の要素
transform属性値がnoneではない要素
mix-blend-mode属性値がnormalでない要素
filter 、 perspective 、 clip-path 、 mask 、 mask-image 、 mask-border 、 motion-pathの値がnoneではない要素
perspective値がnone以外の要素
isolation属性がisolateに設定されている要素
will-change 、それらのプロパティの値を直接指定しない場合でも、CSSプロパティを指定します。
-webkit-overflow-scrollingプロパティがtouch要素に設定されている

要約:

スタッキングコンテキストは他のスタッキングコンテキスト内に含めることができ、一緒にスタッキングコンテキストの階層を形成します。

各スタッキングコンテキストは、その兄弟要素から完全に独立しています。スタッキングを処理するときは、子要素のみが考慮されます。これは BFC に似ています。

各スタッキングコンテキストは自己完結型です。要素のコンテンツがスタックされると、要素全体が親スタッキングコンテキスト内で順番にスタックされます。

2. スタッキングレベル

スタッキングレベルは、同じスタッキングコンテキスト内の Z 軸上の要素の表示順序の概念を決定します。

通常の要素のスタックレベルは、スタックコンテキストによって決まります。
スタッキングレベルの比較は、同じスタッキングコンテキスト内でのみ意味を持ちます。
同じスタッキングコンテキストでは、スタッキングレベルの記述によって、Z 軸上のスタッキングコンテキスト内の要素の上下の順序が定義されます。

スタックレベルは必ずしも z-index によって決定されるわけではないことに注意してください。z-index によって決定されるのは、配置された要素のスタックレベルのみです。他の種類の要素のスタックレベルは、スタック順序、HTML に表示される順序、および親の上にある要素のスタックレベルによって決定されます。詳細なルールについては、以下のスタック順序の概要を参照してください。

3. Zインデックス

CSS 2.1 では、すべてのボックスモデル要素は 3 次元座標系に配置されます。一般的に使用される水平軸と垂直軸に加えて、ボックスモデルの要素は「Z 軸」に沿って積み重ねることもできます。要素が重なり合う場合、Z 軸の順序が非常に重要になります。

-- CSS 2.1 セクション 9.9.1 - 階層化されたプレゼンテーション

z-index は位置指定要素にのみ適用され、位置指定されていない要素には無効です。正の整数、負の整数、0、または auto に設定できます。位置指定要素に z-index が設定されていない場合、デフォルトは auto です。

要素の z-index 値は、同じスタックコンテキスト内でのみ意味を持ちます。親スタッキングコンテキストのスタッキングレベルが別のスタッキングコンテキストのスタッキングレベルよりも低い場合、その z-index を高く設定しても効果はありません。したがって、大きな z-index 値が機能しない状況に遭遇した場合は、その親スタッキングコンテキストが他のスタッキングコンテキストによってカバーされているかどうかを確認してください。

4. 積み重ね順序

スタック順序 (スタック順序、スタック順序、スタック順序) は、同じスタックコンテキスト内の要素の順序を表します。スタックの一番下から、次の 7 つのスタック順序があります。

背景と境界線: スタッキングコンテキストを形成する要素の背景と境界線。
負の z-index 値: スタッキングコンテキスト内で負の z-index 値を持つ子要素を配置します。負の値が大きいほど、スタッキングレベルは低くなります。
ブロックレベルボックス: ドキュメントフロー内のブロックレベルの非位置指定子要素。
フローティングボックス: 位置が指定されていないフローティング要素。
インラインボックス: ドキュメントフロー内のインラインの位置指定されていない子要素。
z-index: 0: z-index が 0 または auto に設定された要素。これらの要素は新しいスタックコンテキストを形成します。
正の z-index 値: 正の z-index を持つ配置された要素。正の値が大きいほど、スタックレベルが高くなります。

同じ積み重ね順序の要素は、HTML に表示される順序で積み重ねられます。レベル 7 の要素は、それより前の要素の上に表示され、下位レベルの要素を覆うように見えます。

5. 実際の戦闘

5.1 一般的な状況

relative配置された 3 つのdivブロックにはそれぞれ異なるabsolute色のspan.red 、 span.green 、 span.blueがあり、すべてにposition:absoluteされています。

Codepen - 通常ケースを参照

したがって、どの要素にも z-index プロパティがない場合、この例の要素は次の順序 (下から上へ) で積み重ねられます。

ルート要素の背景と境界線
ブロックレベルの非位置指定要素は、HTML に表示される順序で積み重ねられます。
インラインの非位置指定要素は、HTML に表示される順序で積み重ねられます。
配置された要素は、HTML に表示される順序で積み重ねられます。

赤、緑、青はすべてz-index autoで配置された要素であるため、7層の重ね順ルールによれば、これらはすべて重ね順の6番目のレベルに属し、HTMLでの出現順に重ねられます：紅->綠->藍

5.2 同じスタックコンテキストの親要素

赤と緑はdiv.first-boxの下にあり、青はdiv.second-boxの下にあります。赤、緑、青にはposition:absoluteが設定され、 first-boxとsecond-boxにはposition:relativeが設定されています。

Codepen を参照してください - 親要素は異なりますが、両方ともルート要素の下にあります

この例では、赤、青、緑の要素の親要素であるfirst-boxとsecond-box 、新しいスタッキングコンテキストを生成しません。これらは両方ともルートスタッキングコンテキストの要素であり、スタッキング順序では両方ともレベル 6 にあります。したがって、HTML での出現順序に従ってスタックされます:紅->綠->藍

5.3 子要素にZインデックスを追加する

赤と緑はdiv.first-boxの下にあり、青と黄色はdiv.second-boxの下にあり、赤、緑、青にposition:absoluteが設定されています。緑にz-index:1が追加されると、 .greenが上部になります。

.second-boxの下の.greenの後に絶対位置のspan.goldを追加し、 z-index:-1を設定すると、赤、緑、青の下になります。

Codepen - z-index の設定を参照してください

この例では、赤、青、緑、黄色の要素の親要素に新しいスタッキングコンテキストは生成されません。これらはすべて、ルートスタッキングコンテキスト内の要素に属します。

赤と青には z-index が設定されておらず、どちらもスタック順序のレベル 6 に属し、HTML に表示される順序でスタックされます。

緑は Z インデックスが正で、レベル 7 です。
黄色は負の Z インデックスを持ち、レベル 2 に属します。

この例では、下から上の順序は、黃->紅->藍->綠です。

5.4 異なるスタッキングコンテキストを持つ親要素の場合

赤と緑はdiv.first-boxの下にあり、青はdiv.second-boxの下にあります。赤、緑、青にはposition:absoluteが設定されています。first first-boxの z-index がsecond-boxの z-index よりも大きく設定されている場合、青の z-index がどれだけ大きくてもz-index:999 )、青は常に赤と緑の下になります。赤と緑の z-index のみを変更すると、両方の要素が親要素first-boxによって生成されたスタックコンテキスト内にあるため、z-index が大きい方が上になります。

Codepen - 異なるスタックコンテキストの親を参照してください

この例では、赤、緑、青はすべて z-index が設定された配置要素ですが、その親要素は新しいスタックコンテキストを作成します。

赤と緑の親要素first-boxは、正の z-index を持つ配置要素であるため、スタック順序でレベル 7 のスタックコンテキストが作成されます。
青い親要素second-boxもスタッキングコンテキストを作成し、スタッキング順序ではレベル 6 に属します。
積み重ね順序に従って、 first-box内のすべての要素がsecond-boxに配置されます。
赤と緑は両方ともスタッキングコンテキストfirst-boxに属し、異なる正の z インデックスが設定されており、両方ともスタッキング順序のレベル 7 に属します。
青い要素はスタッキングコンテキストsecond-boxに属し、大きな正の z-index を持ち、スタッキングコンテキストではレベル 7 になります。
青の Z インデックスは大きいですが、 second-boxのスタッキングレベルがfirst-boxスタッキングレベルよりも小さいため、赤と緑の下に配置されます。

この例では、低から高への順序は藍->紅->綠です。

（私が遭遇した状況はこの例に似ています）

5.5 子要素の不透明度を設定する

赤と緑はdiv.first-boxの下にあり、青はdiv.second-boxの下にあり、赤、緑、青に対してposition:absoluteが設定され、緑に対してz-index:1設定されているため、緑は赤と青の上にあります。

first-boxにopacity:.99を設定すると、赤と緑の z-index がどれだけ高くてもz-index:999 )、青は常に赤と緑の上に表示されます。

.second-boxの下の.greenの後にspan.goldを追加し、 z-index:-1を設定すると、赤、緑、青の下になります。

Codepen - 不透明度の影響を参照

前述したように、 opacityを設定するとスタッキングコンテキストも形成されます。

first-box opacityが設定され、 first-box新しいスタッキングコンテキストになります。
second-box新しいスタッキングコンテキストを形成しないので、その中の要素はすべてルートスタッキングコンテキストに属します。
黄色は積み重ね順序でレベル 2 に属し、赤と緑はレベル 7 に属し、 first-boxレベル 6 に属し、青は積み重ね順序でレベル 6 に属し、HTML の表示順序ではfirst-boxの上にあります。

この例では、低いものから高いものの順序は、黃->紅->綠->藍です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Tomcat のメモリ構成の正しい姿勢についての簡単な説明

>>: editplus の Zen コーディング例コードの説明