CSS での Z インデックスは何を意味しますか?

CSS では、z-index は「レベル、レイヤー空間のスタック レベル」を意味し、要素のスタック順序を指定できます。これは、現在のスタック コンテキストでの要素のスタック レベルを確認するために使用されます。上位のスタック 連続した要素は常に、スタック順序で下位の要素の前に表示されます (構文「element {z-index: auto|}」)。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css z-index

z-index ：auto|<integer>

• 自動デフォルト値

定義: ドキュメント内の要素のスタック順序。現在のスタック コンテキストでの要素のスタック レベルを確認するために使用されます。

適用対象: 配置された要素。つまり、位置が静的でない要素が定義されます。

各要素のスタック順序は、それが属するスタック コンテキストと要素自体のスタック レベルによって決定されます (各要素は、 1 つのスタッキング コンテキスト)。

1. 同じカスケード コンテキスト

大きいカスケード レベルが上に表示され、小さいレベルが下に表示されます。

カスケード レベルの 2 つの要素は、次のように表示されます。ドキュメント フローの順序で、後に記述された内容が前の内容を上書きします。

2. さまざまなカスケード コンテキスト

要素の表示順序は、要素自体のカスケード レベルに関係なく、その祖先のカスケード レベルによって決まります。

例:

1. 2 つの p ボックスがあり、a と c は 1 つのボックス内にあり、b は別のボックス内にあります。通常の効果ではありません。

  
    <div>  
        <p>a</p>  
        <p>c</p>  
    </div>  
    <div>  
        <p>b</p>  
    </div>  

p z-index が設定されておらず、高度なブラウザでは新しいローカル カスケード コンテキストは生成されません。つまり、子要素は新しいローカル カスケード コンテキストによってラップされていないため、その子要素は要素は同じスタック コンテキスト内で、表示順序は独自のスタック レベルによって直接決定できます。

div {  
      position: relative;  
      width: 100px;  
      height: 100px;  
   }  
p {  
      position: absolute;  
      font-size: 20px;  
      width: 100px;  
      height: 100px;  
   }  
.a {  
      background-color: pink;  
      z-index: 1;  
   }  
         
.c {  
      background-color: green;  
      z-index: 2;  
      top: 20px;  
      left: 20px;  
   }  
.b {  
      background-color: red;  
      z-index: 3;  
      top: -20px;  
      left: 40px;  
        }

a、b、c はスタッキング コンテキスト内にあるため、レベルは z-index サイズに基づいて決定されます。以下の図に示すように:

2. 2 つの p ボックスがあり、a と c は 1 つのボックス内にあり、b は別のボックス内にあります。インデックスは通常の効果ではありません。

	<div>
		<p>a</p>
		<p>c</p>
	</div>
	<div>
		<p>b</p>
	</div>

p は z-index を設定し、p の子要素は主に親要素のカスケード関係に基づきます。

<style>
		div {
			width: 100px;
			height: 100px;
			position: relative;
		}
		.box1 {
			z-index: 2;
		}
		.box2 {
			z-index: 1;
		}
		p {
			position: absolute;
			font-size: 20px;
			width: 100px;
			height: 100px;
		}
		.a {
			background-color: red;
		}
		.c {
			background-color: green;
			top: 20px;
			left: 20px;
		}
		.b {
			background-color: blue;
			top: -20px;
			left: 40px;
			z-index: 20;
		}
	</style>

a、b、c は異なるスタッキング コンテキストにあるため、レベルは親の z-index サイズに基づいて決定されます。以下の図に示すように:

上記のことから、z-index がどのように決定されるかがわかります。つまり、z-index が属するスタッキング コンテキストと要素のスタッキング レベルです。それ自体

Update プログラミング関連の知識については、プログラミング学習 Web サイト をご覧ください。 ！

以上がCSS での Z インデックスは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。