CSS Magic Hall: z-index を本当に理解していますか?-CSSチュートリアル-php.cn

1. はじめに

単純なポップアップエフェクトを開発するだけの場合は、z-index を介して要素間の重なり関係を調整する方法を知っていれば十分です。ただし、複数のポップアップウィンドウ間のカスケード関係を適切に処理するには、z-index の背後にある原理と互換性の問題を完全に理解することが必要な知識です。この記事は、将来の参考のために、W3C Recommendation-Layered プレゼンテーションを検討した後にまとめられたメモとして機能します。

英語の名詞を中国語の名詞に翻訳する場合、曖昧さが生じやすいため(例えば、Normal flowを文書フローと訳すなど)、この記事では元の英語の名詞をそのまま使用し、関連する英語の名詞の説明は次のとおりです。

非位置決め要素: CSS 位置決めのない要素、つまり、position: static を持つ要素。

位置指定要素: CSS で位置指定された要素、つまり、相対/絶対/固定の位置を持つ要素。

ボックス: ドキュメントツリーは要素で構成され、レンダリングツリーはボックスで構成されます。要素のサイズとレイアウトのレンダリング操作の実際のオブジェクトは、要素ではなくボックスです。ボックスは要素に対応して生成されます（要素から対応して生成されず、レンダラーが規則に従って自動的に生成する匿名ボックスもあります）。非位置要素は非位置ボックスに対応します。位置決めされた要素は位置ボックスに対応します。

z 軸: ボックス位置決め座標系の Z 軸。

スタッキングコンテキスト: スタッキングコンテキスト、Z 軸の基本単位。ボックスとスタッキングコンテキスト間のマッピング関係は N:1 です。各スタッキングコンテキストには、親コンテキスト (ルートスタッキングコンテキストを除く) と 0 ～ N 個の子コンテキストがあります。

ルートスタッキングコンテキスト: ルートボックス (html/body に対応するボックス) に対応するスタッキングコンテキストは、他のスタッキングコンテキストの祖先コンテキストです。ルートスタッキングコンテキストのスコープは、z 軸全体をカバーします。

スタックレベル: スタッキングレベル。N 個のボックスが同じスタッキングコンテキストにある場合、Z 軸上のそれらの位置はスタックレベルによって決まります。注: スタックレベルは、px のような絶対値ではなく、相対値です。

2. グラフィカルな階層表示実際、私たちがよく目にする Z インデックスは階層表示の単なる属性です。Z インデックスの背後にある原理を理解することは、基本的に階層化の原理を理解することになります。例を使用して、階層表示 (Z 軸、(ルート) スタッキングコンテキスト、ボックス、スタックレベル) に関係するオブジェクトと属性、およびそれらの間の関係を理解しましょう。 HTML マークアップ

<style type="text/css">
  p{position:relative;}</style>
<body>
  <p id="d1" style="z-index:10;">
    <p id="d4" style="z-index:-9999;"></p>
  </p>
  <p id="d2" style="z-index:8;"></p>
  <p id="d3" style="z-index:9;"></p>
  <p id="p1"><p>
</body>

ログイン後にコピー

手順:

1. レンダリングツリーを構築するとき、対応するボックスが要素に対して生成されるため、p#d1->d1:box,p#d2- >d2 :ボックス、p#d3->d3:ボックス、p#d4->d4:ボックス、p#p1->p1:ボックス。

2. 位置決めされたボックスの場合、z-index 属性値が 0 でない場合、新しいスタッキングコンテキストが作成され、その子孫ボックスはこの新しいスタッキングコンテキストに属します。

3. 同じスタッキングコンテキスト内の Z インデックスのみが比較可能です。つまり、Z インデックスについて議論するときは、その Z インデックスがどのスタッキングコンテキストであるかを説明する必要があります。例のように、-9999 は 10 より小さいですが、d4:box と d1:box は異なるスタッキングコンテキストにあるため、どちらのボックスがユーザーに近いかを判断することはできません。

3. カスケードルール

スタッキングルールは、どのボックスがユーザーに近いかを決定するものです。 1. 前提: ボックスは同じスタッキングコンテキストに属し、同じ z-index を持ちます

ルール: ドキュメントツリー内のボックスに対応する要素の順序に従って、後者がユーザーに近くなります。前者 (後ろから前) より

<!-- 两种情况下，d2均排在d1的后面，因此d2在z-axis上位于d1的上面 -->
<p id="d1">
  <p id="d2">
  </p>
</p>

<p id="d1">
</p>
<p id="d2">
</p

ログイン後にコピー

2. 前提: ボックスは同じスタッキングコンテキストに属し、異なる Z-インデックスを持ちます

ルール: より大きな Z-インデックス属性値を持つボックスユーザーに近い

<!-- d1的z-index为12，而d2的z-index为0，所以d1在d2的上面 -->
<p id="d1" style="position:relative;z-index: 12;">
</p>
<p id="d2" style="z-index: 0;margin-top:-20px;">
</p

ログイン後にコピー

3 . 前提: ボックスは異なるスタッキングコンテキストに属し、スタッキングコンテキストには孫/父子関係はありません

规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。

<p>
  <p id="d1" style="position:relative; z-index:10;">
    <p id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</p> 
  </p>
  <p id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2</p>
  <p id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3</p>
</p>

ログイン後にコピー

4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系

规则：属于子stacking context的box必定更靠近用户

<p style="background:blue; width:100px; height:100px; position:relative; z-index:10;">
  <p style="background:red; width:50px; height:50px; position:relative; z-index:-10;"></p>
</p>

ログイン後にコピー

5. 前提：boxes属于相同的stacking context，并且两者都是non-positioned element。

规则：float:left|right的元素必定更靠近用户

四、z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　

啰嗦一句：同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。

它有两个作用：1. 设置box在其所属的stacking context下的stack level；

2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context。

注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。

z-index生效的阀门

z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。

也许你会举出如下反例：

<p id="d1" style="z-index:10;"></p>
<script type="text/javascript">
  console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 输出10</script>

ログイン後にコピー

但抱歉的是，上面获取的是non-positioned element p#d1的z-index属性值，而不是non-positioned box的z-index属性值。

对于positioned element，它会将z-index赋予给对应的positioned box，而non-positioned element则不会。

五、兼容性问题——IE6/7的诡异行为　　　　　　　　　　　　　　　　

IE6、7中并非当positioned box并且z-index不为0时才创建stacking context，而是positioned box就会创建stacking context。

<style>
    .parent{width:200px; height:200px; padding:10px;}
    .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
    .lt50{left:50px;top:50px;}</style>
 
<p style="position:absolute; background:lightgrey;" class="parent">
  <p style="position:absolute;z-index:20;background:darkgray;" class="sub">20</p>
  <p style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</p>
</p>
 
<p style="position:absolute;left:80px;top:80px;background:black;" class="parent">
  <p style="position:absolute;z-index:2;background:darkgray;" class="sub">2</p>
  <p style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</p>
</p>

ログイン後にコピー

符合W3C标准的渲染效果：