1. z-index
z-index は、要素が重なった場合の重なり順を制御するために使用されます。
に適用: 位置決めされた要素 (つまり、position:relative/absolute/fixed)。
一般的には、値が大きいほど高いということは単純に見えますが、z-index が複雑な HTML 要素階層に適用される場合、その動作は理解するのが難しく、さらには予測不可能になる可能性があります。 z-index の積み重ね規則は非常に複雑なので、以下で 1 つずつ説明します。
最初に名詞を説明します:
スタッキングコンテキスト: 翻訳は「スタッキングコンテキスト」です。各要素は 1 つのスタッキング コンテキストにのみ属し、要素の z インデックスは、同じスタッキング コンテキスト内での要素の「z 軸」の表示順序を記述します。
z-index 値:
デフォルト値 auto:
ページ上に新しいボックスが生成されるとき、そのデフォルトの z-index 値は auto です。これは、ボックスが新しいローカル スタッキング コンテキストを生成しないことを意味します。それ自体ですが、親ボックスと同じスタッキングコンテキスト内にあります。
正/負の整数
この整数は、現在のボックスの Z インデックス値です。 z-index 値が 0 の場合は、ローカル スタッキング コンテキストも生成されるため、ボックスの親ボックスの z-index はその子ボックスと比較されません。これは、親ボックスとその子ボックスの z-index を分離するのと同じです。子ボックスの z-index。
次に、z-index を使用しない最も単純なケースから始めて、段階的に進めます。
2. z-indexを使用しない場合の積み重ね順序z-indexを使用しない場合はデフォルトの場合でもあります、つまり、すべての要素がz-indexを使用しない場合、積み重ね順序は次のようになります(from下から上へ)
最後の 2 つのルールを説明します:
例:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{opacity: 0.7;} #normdiv { height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; }</style></head><body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="reldiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />position: relative; </div> <div id="reldiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />position: relative; </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #4</span> <br />position: absolute; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning </div></body></html>写真と真実:
分析:
#5 には位置決めがなく、通常の流れにあるため、上記のルールに従って、#1、#2、# に先行します。 3、# 4これらの配置された要素は下部にレンダリングされます。
#1、#2、#3、#4 はすべて位置決めされた要素であり、Z インデックスが設定されていないため、ドキュメント内に表示される順序に従って順番にレンダリングされます。透明度を削除すると、鮮明に表示されます。効果。
3. 浮動スタック順序浮動要素の Z インデックス位置は、非配置要素と配置要素の間にあります。 (下から上へ)
背景と非配置要素の境界線はフローティング要素の影響を受けませんが、コンテンツ内の要素は影響を受けます (フローティング レイアウト機能)
例:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Stacking and float</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{ opacity: 0.7;} #absdiv1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #990000; background-color: #ffdddd; } #normdiv {/* opacity: 0.7; */ height: 100px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 10px 0px 10px; text-align: left; } #flodiv1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #flodiv2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #absdiv2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990000; background-color: #ffdddd; }</style></head><body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="flodiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />float: left; </div> <div id="flodiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />float: right; </div> <br /> <div id="normdiv"> <br /><span class="bold">DIV #4</span> <br />no positioning </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #5</span> <br />position: absolute; </div></body></html>分析:
#4 は非配置要素です通常のフローでは要素なので、最初に一番下にレンダリングされます。
#2 #3 左フロート 1 つ、右フロート 1 つ、そしてレンダリングされます。互いが z-index 値によって上書きされることはありません。以下を参照してください。
#1 #5 は配置された要素であり、最後にレンダリングされます。ブラウザー ウィンドウが小さくなると、#5 は HTML ドキュメント内で #1 の後ろにあるため、#5 は #1 の上になります。以下を参照してください。
4. z-index
デフォルトの重なり順は上で説明したように、要素の重なり順を変更したい場合は、z-index を使用する必要があります。
注: 最初の 2 つのケースでは、要素間に重複がありますが、それらはすべて同じ Z レイヤー内にあります。 z-index 属性が設定されていないため、デフォルトのレンダリング レイヤはレイヤ 0 です。したがって、異なるレイヤー内の要素間のオーバーレイは当然ですが、同じレイヤー内の要素もオーバーライドを送信することに注意してください。
z-index は、位置決めされた要素 (つまり、position:relative/absolute/fixed) にのみ適用されます。
例:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; opacity: 0.7; } .bold { font-weight: bold; } #normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; }</style></head><body> <br /><br /> <div id="absdiv1"> <br /><span class="bold">DIV #1</span> <br />position: absolute; <br />z-index: 5; </div> <div id="reldiv1"> <br /><span class="bold">DIV #2</span> <br />position: relative; <br />z-index: 3; </div> <div id="reldiv2"> <br /><span class="bold">DIV #3</span> <br />position: relative; <br />z-index: 2; </div> <div id="absdiv2"> <br /><span class="bold">DIV #4</span> <br />position: absolute; <br />z-index: 1; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index: 8; </div></body></html>前の例の要素の積み重ね順序が z-index の影響を受けるのはなぜですか?これらの要素には、スタック コンテキストでの動作をトリガーする特別なプロパティがあるためです。
問題は、どのような種類の要素がスタッキング コンテキストを生成するかということです。次のルールのいずれかを満たします:
在堆叠上下文（stacking context）中 ，子元素的堆叠顺序还是按照上述规则。重点是，子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。
总结几句：
渲染的时候，先确定小的stacking context中的顺序，一个小的stacking context确定了以后再将其放在父stacking context中堆叠。有种由内而外，由小及大的感觉。
举例：HTML结果如下，最外层是HTML元素，包含#1 #2 #3，#3中又包含着#4,#5,#6。
Root(HTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Understanding CSS z-index: The Stacking Context: Example Source</title> <style type="text/css"> * { margin: 0; } html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px solid #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px solid #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px solid #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px solid #009; padding-top: 125px; background-color: #ddf; text-align: center; } </style> </head> <body> <div id="div1"> <h1>Division Element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>Division Element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>Division Element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>Division Element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>Division Element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>Division Element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> </body></html>效果：
分析一下：
1、因为设置了div {opacity: 0.7; position: relative;}，所以#1~#6的z-index都是有效的。
2、为什么#4的z-index比#1高，但是却在#1下面？因为#4的z-index虽然值大，但它的作用域在包含块#3内，而#1的z-index的作用域在html内，和#3同属html，而#3的z-index小于#1。
3、为什么#2的z-index值比#5的大，还在下面？同上。
4、#3的z-index是4，但该值和#4,#5,#6的z-index不具有可比性，它们不在一个上下文环境。
5、如何轻易的判断两个元素的堆叠顺序？
z-index对堆叠顺序的控制类似于排版时候一大章下几个小节的样子，或者版本号中一个大的版本号跟着小版本号。
Root-z-index值为默认auto，即0
想看更多例子，可参考文章最后的资源链接。
六、 合理使用z-index数值如果现有三个堆叠的层，从上到下分别为：DIV3，DIV2，DIV1，设置时以100为间隔，设置DIV1的z-index为0，DIV2的z-index为100，设置DIV3的z-index为200。这样后期如果需要在DIV1和DIV2之间加入一些层的话，以10为间隔，设置z-index为10，20等。再需要向z-index0和z-index10之间加入一层的话以5为间隔。这样的写法可以方便后期扩展添加内容。
尽量避免给z-index使用负值。当然不是绝对的，比如在做图文替换的时候可以使用负值。
七、资源链接MDN z-index
understanding css z-index
w3c z-index
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
