I.はじめに
今日、レイアウトの互換性の問題に遭遇しました。デバッグした結果、z-indexのパフォーマンスが私の認識と一致していないことが判明したので、z-indexの私の認識が間違っていたことに気づき、これをまとめた記事を書きました-index 特有の使用法。基礎ができている人はそのまま第4クォーターに進むことができます。
2 番目に、標準的なドキュメント フロー
z-index を理解する前に、標準的なドキュメント フローを知る必要があります。
標準ドキュメント フローは、実際にはブラウザがページをレンダリングするためのルールです。すべてのページ要素は、左上隅から始まり、上から下、そして左から、HTML ドキュメントに表示される順序でブラウザに表示される必要があります。左へ 右から順に表示されます。
具体的なパフォーマンスは次のとおりです。
2.1、ブロックレベルの要素:
以下のようないくつかの特徴があります。
1.单独的占一行
2.可以设置宽、高
3.如果不设置宽度，他将默认占满父盒子的宽度
2.2、インライン要素:
1.与其他元素自动的并排在一行上
2.不能设置它的宽和高，它的宽和高就是内容的宽和高
2.3 では、ブロックレベル要素とインライン要素は相互に変換できます。
display:block
display:inline
３、ポジション
要素をドキュメント フローから遠ざける一般的な手段は、フローティングと配置です。
その理由は、ドキュメント フローが分離されている場合にのみ、z インデックスを使用して要素のカスケード レベルを設定できるためです。
フローティングは理解しやすく、位置決めは主に位置のいくつかの属性値です。
通常はposition以下のような値になります。詳細は次のとおりです。
| 価値 | 意味 | 説明する |
|---|---|---|
| 静的 | 静的位置決め | オブジェクトは標準のドキュメント フローに従います。top 、right、bottom、left 、およびその他のプロパティは無効です。 |
| 相対的 | 相対的な位置決め | オブジェクトは標準ドキュメント フローに従い、標準ドキュメント フロー内のオブジェクトの位置を基準にしてオフセットするtop、right、bottom、leftおよびその他の属性に依存し、階層関係はz-indexを通じて定義できます。 |
| 絶対 | 絶対位置決め | このオブジェクトは標準のドキュメント フローから離脱し、絶対位置決め (静的位置決め以外の最初の親要素を基準とした絶対位置決め) にtop、right、bottom、leftおよびその他のプロパティを使用し、 z-indexを通じてカスケード関係を定義できます。 |
| 修理済み | 固定位置 | オブジェクトは標準のドキュメント フローから逸脱しており、絶対位置 (ブラウザ ウィンドウを基準とした絶対位置) にはtop、right、bottom、leftおよびその他のプロパティを使用し、 z-indexを通じてカスケード関係を定義できます。 |
| 粘着性のある | スティッキーポジショニング | 相対位置決めの相対と固定位置決めの固定を組み合わせたものと言えます。要素の固定相対オフセットは、スクロール ボックスを使用した最も近い祖先要素を基準としています。どの祖先要素もスクロールできない場合、要素のオフセットはビューポートを基準にして計算されます。 |
これらの内容はインターネット上の多くの記事に掲載されているので詳細は省略しますが、本記事では主にz-indexのルールを初心を忘れずに説明します。
4 番目に、z-index のスタッキングコンテキストの理解
Z インデックスは次のように理解する必要があります。各スタッキング コンテキストは床であり、床の Z インデックスは階段です。1階の階段がどんなに価値が高くても、2階より高くすることは不可能です。
したがって、最初にカスケード コンテキストの生成条件を理解する必要があります。
1，根元素html ；
2，绝对定位 absolute 或相对定位 relative 且 z-index 值不为 auto ；
3，一个 flex 项目，且 z-index 值不为 auto ，也就是父元素 display: flex|inline-flex ；
4，元素的 opacity 属性值小于 1 ；
5，元素的 transform 属性值不为 none ；
6，元素的 mix-blend-mode 属性值不为 normal ；
7，元素的 isolation 属性被设置为 isolate ；
8，在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 时总是会创建一个新的层叠上下文, 即使 z-index 的值是 auto ；
元素的 -webkit-overflow-scrolling 属性被设置 touch 。
めったに使用されない後者はさておき、この記事では主に前者について説明します。いくつかの名詞の概念を整理する必要があります。
层叠上下文：对应本节中所说：生成的一个层叠上下文（一个楼层）
层叠等级：一个层叠上下文中的元素层叠规则：七层层叠规则
层叠上下文层级;每个层叠上下文之间是有级别的，低级别的无论z-index多大都无法突破高级别的层叠上下文。各个层叠上下文之间，用层级来描述（有的文章还是用层叠等级，这样容易混乱，所以我换种说法）
5、z-indexのカスケードレベル
各階層コンテキストには 7 つのカスケード レベルがあるため、カスケード コンテキストを理解するだけでは十分ではありません。詳細は以下のとおりです。
次のコードは 7 層構造を反映できます。
<!DOCTYPE html>
<html lang="en">
<body>
<style>
body{
height: 100vh;
background: pink;
}
/* 新创建一个层叠上下文 */
.box{
height: 350px;
background: greenyellow;
position: relative;
z-index:1;
}
.total{
height: 100px;
width: 300px;
text-align: center;
position: absolute;
}
.first-item{
background: yellow;
top: 10px;
left:10px;
z-index: -1;
}
.second-item{
background: blueviolet;
display: block;
top: 40px;
left:40px;
}
.third-item{
background: red;
float: left;
top: 70px;
left:70px;
}
.fourth-item{
background: blue;
display: inline;
top: 100px;
left:100px;
}
.five-item{
background: rgb(18, 248, 217);
top: 130px;
left:130px;
z-index: auto;
}
.six-item{
background: rgb(248, 83, 18);
top: 160px;
left:160px;
z-index: 1;
}
</style>
<div class="box">
<div class="first-item total">z-index小于0 </div>
<div class="second-item total">block块级盒子</div>
<div class="third-item total">float浮动盒子</div>
<div class="fourth-item total">inline/inline-block水平盒子</div>
<div class="five-item total">z-index:auto或0或不设置</div>
<div class="six-item total">z-index大于0</div>
</div>
</body>
</html>
達成される効果は 7 層構造とまったく同じです。
上記の 4 番目のセクションのスタッキング コンテキストの作成に関する知識からわかるように、ここでは HTML がデフォルトで基本的なスタッキング コンテキストを作成します。その影響を避けるために、ボックスに別のスタッキング コンテキスト (位置決めと Z インデックスを使用) を作成させます。
したがって、これら 6 つのサブ要素とその独自の背景/境界線は、実際にはこのボックスのスタッキング コンテキスト内にあり、同じスタッキング コンテキストの 7 層スタッキング レベルのルールに従う必要があります。
6、カスケードコンテキスト階層と dom 構造関係
まず明確にしておきたいのは、カスケード コンテキスト レベルと dom 構造の間に明確なマッピング関係がないということです。ただし、カスケード コンテキスト レベルは dom 構造に基づいて生成されます。
主な理由は、スタッキング コンテキストがネストをサポートしており、スタッキング コンテキスト内に新しいスタッキング コンテキストを作成することもできるためです。ただし、新たなカスケードコンテキストが作成されない場合は、dom 構造が親子関係であるかどうかに関わらず、同一カスケードコンテキスト間の 7 層カスケードレベルルールにより判定されます。
ここで、上記のコードは次のように変更されます。
<!DOCTYPE html>
<html lang="en">
<body>
<style>
body{
height: 100vh;
background: pink;
}
/* 新创建一个层叠上下文 */
.box{
height: 350px;
background: greenyellow;
position: relative;
z-index:1;
}
.total{
height: 100px;
width: 300px;
text-align: center;
position: absolute;
}
.first-item{
background: yellow;
top: 10px;
left:10px;
}
.second-item{
background: blueviolet;
display: block;
top: 50px;
left:40px;
z-index: 1;
}
.a-1{
background: red;
height: 20px;
position:absolute;
left: 200px;
top:30px;
z-index: 5;
}
.a-2{
background: rgb(229, 20, 236);
height: 20px;
position: absolute;
z-index: -1;
right: -20px;
top: 27px;
}
</style>
<div class="box">
<div class="first-item total">
<div class="a-1">a-1</div>
<div class="a-2">a-2</div>
</div>
<div class="second-item total"></div>
</div>
</body>
</html>
達成された効果:
ここと同じように、box は新しいスタッキング コンテキストを作成します。これにはサブ要素 first-item と Second-item があるため、これら 2 つの要素は同じスタッキング コンテキスト (box によって作成される) 内に存在する必要があります。
2 番目の項目にはサブ要素がなくなりました。これについて考える必要はありません。次に最初の項目を見てみましょう。
first-item は新しいスタッキング コンテキストを作成しないため (位置決めはありますが、z-index は設定されていません)、その子要素も it と同様に現在のボックスによって作成されたスタッキング コンテキスト内にあります。
つまり、a-1 と a-2 は first-item の子要素であっても、first-item と Second-item、a-1 と a-2 は同じ階層コンテキスト内にスタックされます。
次に、7 層のカスケード ルールに従って次のようになります。
box：创建该层叠上下文，它的background在最下面（草绿色）
first-item：block块级盒子（黄色）
second-item：z-index=1（紫色）
a-1:z-index=5（红色）
a-2:z-index=-1(粉色)
これは、上の図の結果と一致しています。これが、次のように言われる理由です。 **dom 構造とスタッキング コンテキストには厳密なマッピング関係がありません。**スタッキングコンテキストを生成するのは dom の層ではありません。
さらに、**カスケード コンテキスト レベルは dom 構造に基づいて生成されます。**これは、内部要素の z-index がどれほど大きくても、低レベルのスタッキング コンテキストは高レベルの要素をカバーできないことを意味します。
<!DOCTYPE html>
<html lang="en">
<body>
<style>
body{
height: 100vh;
background: pink;
}
/* 新创建一个层叠上下文 */
.box{
height: 350px;
background: greenyellow;
position: relative;
z-index:1;
}
.total{
height: 100px;
width: 300px;
text-align: center;
position: absolute;
}
.first-item{
background: yellow;
top: 10px;
left:10px;
z-index: 1;
}
.second-item{
background: blueviolet;
display: block;
top: 50px;
left:40px;
z-index: 2;
}
.a-1{
background: red;
height: 20px;
position:absolute;
left: 200px;
top:30px;
z-index: 5;
}
.a-2{
background: rgb(229, 20, 236);
height: 20px;
position: absolute;
z-index: -100;
right: -20px;
top: 27px;
}
</style>
<div class="box">
<div class="first-item total">
<div class="a-1 total">a-1</div>
<div class="a-2 total">a-2</div>
</div>
<div class="second-item total"></div>
</div>
</body>
</html>
対応する実装効果とスタッキングコンテキストの階層関係は下図のとおりであり、1 番目のアイテムのレベルは 2 番目のアイテムのレベルよりも低く、ボックスのレベルよりも高いため、z- first-item の要素のインデックスは、2 番目の item.content のインデックスを超えることはできません。Z インデックス設定がどれほど低くても、ボックス (草の緑) よりも低くすることはできません。また、スタッキング コンテキストの背景色 (このスタッキング コンテキストの最低スタッキング レベル、下の図では黄色) よりも低くすることはできません。 。
7、要素の重なり順を判定するルーチン
スタッキング コンテキスト、スタッキング レベル、スタッキング コンテキスト レベルの関係を理解した後、これを使用して 2 つの要素のカバレッジを判断できます。
1，看两个元素所在的层叠上下文层级。高层元素必然遮盖低层元素。
2，若在同一层叠上下文层级，也就是在同一个层叠上下文中，就需要看七层层叠等级。谁高谁在上面
3，如果都一样，后写的盖住之前写的。
8、ケース演習
8.1、多層 dom 構造ですが、実際には同じレベルのコンテキスト
<!DOCTYPE html>
<html lang="en">
<body>
<style>
body{
height: 100vh;
background: pink;
}
/* 新创建一个层叠上下文 */
.box{
height: 350px;
background: greenyellow;
position: relative;
z-index:1;
}
.total{
height: 100px;
width: 300px;
position: absolute;
}
.first-item{
background: yellow;
top: 10px;
left:10px;
}
.a-1{
width: 300px;
height: 100px;
background: green;
float: left;
top: 10px;
left: 10px;
position: absolute;
}
.b-2{
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 40px;
left: 20px;
z-index: 100;
}
.second-item{
background: orange;
display: block;
top: 30px;
left:50px;
z-index: 2;
}
</style>
<div class="box">
<div class="first-item total">
<div class="a-1">float绿色</div>
<div class="a-2">
<div class="b-2">100蓝色</div>
</div>
</div>
<div class="second-item total">2橙色</div>
</div>
</body>
</html>
生成される効果は次の図に示すとおりです。first-item は新しいスタッキング コンテキストを生成しないため、first-item、next-item、a-1、a-2、b-2 はすべて同じスタッキング コンテキスト内にあります。 、7 つのカスケード レベル ルールを使用して直接判断するだけです。
8.2、多層 dom 構造、複数のカスケード コンテキスト レベル
上記の最初の項目にスタイルを追加します。
.first-item{
z-index: 1;
}
効果は次のようになります。
これは、first-item も Second-item によって作成されるものと並行してカスケード コンテキストを作成し、コンテキスト レベルが Second-item よりも低いためです。したがって、b-2 の z-index: 100 であっても、2 番目の項目より大きくすることはできません。
９、まとめ
z-index の使用規則については、MDN には実際に「z-index が大きいほどレベルが高く、父親は父親のために戦うことになる」という簡単な文があります。
実際、それは次のとおりです。
1，同一个层叠上下文中,z-index越大则越上层。
2，不同层级上下文，则层级越高越上层。
3，层级等级和层叠等级相同的，则后来的覆盖之前的。
実際、多くの人が誤解しているのは、dom 構造とカスケード コンテキスト レベルの間には厳密なマッピング関係がないということです。要素の n レベルの孫は、a と同じスタッキング コンテキスト内に存在する場合があります。