CSS の配置における z-index_html/css_WEB-ITnose のスタックについての深い理解

× カタログ [1] 定義 [2] スタッキング ルール [3] スタッキング コンテキスト [4] 互換性

前の言葉

あらゆる配置において、2 つの要素を配置しようとする状況に必ず遭遇します。同じ位置です。明らかに、一方が他方をカバーする必要があります。ただし、どの要素を一番上に配置するかを制御する方法として、z-index 属性が導入されています

Definition

z-index を使用すると、要素が互いに重なる順序を変更できます。このプロパティの名前は、x 軸が左から右、y 軸が上から下である座標系に由来しています。画面からユーザーまでが Z 軸です。この座標系では、z インデックス値が高い要素は、z インデックス値が低い要素よりもユーザーに近くなります。これにより、z インデックス値が高い要素が他の要素と重なり合います。これはスタッキングまたはスタッキングとも呼ばれます。

z-index

Value: CSS3標準に合わせて、z-indexの適用範囲が大幅に拡張されました

[注] すべての整数がz-indexとして使用できます。負の数値を含む値。負の z-index 値を要素に割り当てると、その要素はリーダーからさらに遠くに移動され、スタックの下位レベルに移動します

スタッキング ルール

CSS2.1 の場合、ページ要素 スタッキング ルールは次のとおりです。以下に示すように:

位置決めされた要素のスタック規則

[1] 位置決めされた要素（位置が静的ではない要素）の場合、z-index が設定されていない場合、または z-index が同じ場合、次のようになります。要素 前の要素を上書きします

[2] 同じスタッキング コンテキスト内の同じレベルにある要素の場合、デフォルトの z-index の大きい値が小さい z-index 値をカバーします

スタッキング コンテキスト

element z-index 値が指定されている場合 (自動ではない)、エレメントは独自のローカル スタッキング コンテキストを確立します。これは、要素のすべての子孫が、祖先要素に対して独自のスタック順序を持つことを意味します

[注] auto 値は、現在のスタック コンテキストで生成されたスタック レベルがその親ボックスのレベルと同じであることを意味します。新しいローカル オーバーレイ コンテキストは作成されません。 z-index:auto の値は z-index:0 に等しいですが、z-index:0 は新しいローカル スタッキング コンテキストを作成します

デフォルト スタイル

<div class="box1">    <ul class="list1">        <li id="one">1</li>        <li id="two">2</li>        <li id="three">3</li>        <li id="four">4</li>    </ul>    <ul class="list2">        <li id="five">5</li>        <li id="six">6</li>    </ul>    </div><div class="box2">    <div id="seven">7</div>    <div id="eight">8</div></div>

.box1{z-index: 1;}.box2{z-index: auto;}.list1{z-index: 2;}.list2{z-index: 1;}#one{z-index: -1;}#two{z-index: 1;}#three{z-index: 0;}#four{z-index: auto;}#five{z-index: 2;}#six{z-index: 1;}#seven{z-index: 2;}#eight{z-index: -1;}

//堆叠顺序.box1                  1.box1 .list1           1,2.box1 .list1 #one      1,2,-1.box1 .list1 #two      1,2,1.box1 .list1 #three    1,2,0.box1 .list1 #four     1,2,auto.box1 .list2           1,1.box1 .list2 #five     1,1,2.box1 .list2 #six      1,1,1.box2                  auto.box2 #seven           auto,2.box2 #eight           auto,-1

[注意] auto, 2 および auto,-1 は、スタッキング コンテキストが生成されないことを意味するため、2 および -1 と同等です。その場合、#seven と #eight は、その親 .box2 および .box1 と同じレベルにあることと同等になります

要素は、それらのスタッキング コンテキストの背景の下にスタックされません (つまり、親の z-index を次のように配置します)数値) ですが、その要素がスタックコンテキストにない場合、要素は

要素の背景の下にスタックされませんが、そのコンテンツの下にスタックできます

互換性あり

【1】IE7ブラウザのz-indexのデフォルト値は0です

一般的に、位置決めされた要素のz-indexのデフォルト値はautoで、IE7のz-indexのデフォルト値は0です。この 2 つの違いは、IE7 ブラウザの位置決め要素がスタッキング コンテキストを自動的に生成することです

div{    position: absolute;    border: 1px solid black;}    .div1{    width: 300px;    height: 100px;    background-color: pink;    z-index: 1;}.div2{    background-color: lightgreen;    top: 50px;    left: 50px;    width: 200px;    height: 200px;}.in2{    width: 100px;    height: 150px;    background-color: lightblue;    z-index: 2;    border: none;}

<div class="div1"></div><div class="div2">    <div class="in2"></div></div>

一般に、div1 のスタック順序は 1、div2 のスタック順序は です。 auto; in2 のスタック順序は auto です。2 は 2 に相当します。したがって、カバレッジ レベルは、in2 が div1 をカバーし、div2 をカバーします。ただし、IE7 ブラウザでは、div1 のスタック順序は 1、div2 のスタック順序は 0、in2 のスタック順序は 0,2 です。ということでカバレッジレベルはdiv1、in2をカバー、div2をカバー

左が他のブラウザアイコン、右がIE7-ブラウザアイコン

.div1{    position: absolute;    z-index: 1;    width: 100px;    height: 100px;    background-color: pink;}.box{    position: relative;    z-index:2;}.div2{    float: left;    width: 150px;    height: 50px;    background-color: lightgreen;}

【2】IE6-ブラウザ約z -index 奇妙なバグ

要素自体が浮動で位置決め要素ではなく (位置が静的ではない)、要素の親が相対的な場合、要素の z-index がどのように設定されていても、IE6 ブラウザでは機能しません。親が設定されています

<div class="div1"></div><div class="box">    <div class="div2"></div>    </div>

左側がIE6ブラウザの結果、右側がその他のブラウザの結果です

解决方法

　　[1]元素去除浮动

　　[2]父级元素的相对定位改成绝对定位

　　[3]元素添加position属性(static除外)

　　以上三个方法任一方法都可以，其实就是在破坏bug成立的条件

 

【3】IE6-浏览器下select的z-index无效而遮挡div

　　IE6-浏览器下select设置z-index无效，且默认会堆叠在div上

.box{    left: 30px;    z-index:2;    position: absolute;    width: 100px;    height: 100px;    background-color: pink;}select{    width: 100px;    position: absolute;    z-index:1;}

<div class="box"></div><select name="select" id="slt1">    <option value="1">第一项</option>    <option value="2">第二项</option></select>

　　左边是IE6浏览器结果，右边是其他浏览器结果

解决方法

　　在IE6-浏览器中，虽然div无法覆盖select，但是iframe可以select。所以可以设置一个与div宽高相同的iframe。让div覆盖iframe，iframe覆盖select，最终达到select被div覆盖的效果

iframe{    left: 30px;    position: absolute;    width: 100px;    height: 100px;    z-index: 2;}

<div class="box"></div><select name="select" id="slt1">    <option value="1">第一项</option>    <option value="2">第二项</option></select>