単純な Z-index には非常に多くの要素が含まれる可能性がありますKnowledge_html/css_WEB-ITnose

z-index は、日常の開発において比較的一般的なスタイルで、z 軸上のラベルの順序を設定するものです。大きい方の z インデックス値が前に表示され、小さい方はブロックされます。はい、これが -index の実際の動作です。

しかし、z-index を本当に理解していますか?どのような性質があるかご存知ですか？以下にいくつかの名詞を示します: 「スタッキング順序」、「スタッキングコンテキスト (スタッキングコンテキスト)」、「スタッキングレベル (スタッキングレベル)」。

まず、z-index の基本的な使用法について話しましょう:

z-index は 3 つの値に設定できます:

auto、デフォルト値。 auto に設定すると、現在の要素のカスケード レベルは 0 になり、このボックスは新しい階層コンテキストを作成しません (ルート要素、つまり 100db36a723c770d327fc0aef2ce13b1 でない限り)。カスケード レベルを示します。負の値を使用できます。値に関係なく、新しいカスケード コンテキストが作成されます inherit。親要素の継承

z-index は、位置決めされた要素

でのみ機能します。例:

<style>    #box1{        background: blue;        width: 200px;        height: 200px;    }    #box2{        background: yellow;        width: 200px;        height: 200px;        margin-top:-100px;    }       </style><div id="box1"></div><div id="box2"></div>    

この時点で、box1 が box2 の上に表示されることを期待します。図に示すように、0 より大きい値は問題ありませんが、これは間違っています。

box2 は box1 をブロックします。前述したように、box1 が z-index 値を大きな値に設定しても役に立ちません。以前は、z-index は要素の位置を指定するだけでした (position= Except static。要素はデフォルトで静的であるため、これは位置スタイルを使用しないのと同じです)。つまり、z-index はposition

と一緒に使用する必要があります。

興味があれば、ご自身で確認してください。これは単なる提案です。

重なり順は絶対要素の Z 軸の順序です

重なり順は実際には Z インデックスに固有のものではなく、要素がレンダリングされる順序には多くの影響があります。つまり、要素が発生すると、カスケードすると、より高いレベルの要素が最初に表示され、同じレベルの要素が DOM の順序に従ってレンダリングされ、後の要素が前の要素を上書きします。どんなにテキストが多くても、画像ほど直接的ではないかもしれません。下の画像は「7 層の積み重ねられたレベル」です (インターネットから盗んだ、非常に古典的な画像です)

別の例:ここで取り上げましょう。 先ほどの栗の場合、z-index を使用せずに、CSS スタッキング シーケンスを使用してオクルージョン問題を解決します。 コードの変更は次のとおりです

<style>    #box1{        background: blue;        width: 200px;        height: 200px;        display:inline-block;    }    #box2{        background: yellow;        width: 200px;        height: 200px;        margin-top:-100px;    }       </style><div id="box1"></div><div id="box2"></div>   

ここでは、わずかな変更のみが行われます。 box1 ; スタイルに display:inline-block を追加します。まず、box1 と box2 がカスケードされ、7 番目からわかるように、box はデフォルトでブロックレベルの要素になります。 -次数図では、display: ブロック要素のカスケード レベルは、display: inline -block 要素よりも低いため、図に示すように、ブラウザーは box1 の上に box2 をレンダリングします。コード内での z-index の使用を可能な限り減らしてください。複数の人が同じシステムを開発しているため、z-index を使用しすぎると、競合、つまりオクルージョンの問題が発生する可能性が高くなります。一般的に、z-index 値は 10 以内で十分です。

キーポイント: カスケードコンテキスト

まず、カスケードコンテキストを作成する方法について話しましょう CSS でカスケードコンテキストを作成する方法はたくさんありますが、一般的に使用される方法はほんのわずかです

1. z です。位置決めされた要素の -index が auto と等しくありません 要素に対してカスケード コンテキストが作成されます

2. HTML ルート要素はデフォルトでカスケード コンテキストを作成します (これは特殊なケースです。知っておいてください) 3.要素の不透明度が 1 に等しくない場合、カスケード コンテキストが作成されます

4. 要素の変換は「Equal to none」ではなく、カスケード コンテキストが作成されます

カスケード コンテキストを作成する方法は他にもあります。上記の 4 つは開発でよく使用されます。

カスケード コンテキストの作成方法を理解した後、重要な質問は、カスケード コンテキストの用途は何でしょうか?ということです。

これは、前の

第 7 レベルの画像と組み合わせる必要があります

一番下のレイヤーである背景は、カスケード コンテキストに基づいています。つまり、

カスケード コンテキストでは、すべての要素が背景と上の境界線にレンダリングされます。階層コンテキストを持たないブロック ボックスやフロート ボックスなどの要素で、子要素が z-index を負の値

に設定すると、子要素は親要素

によって隠されます。理解するのは簡単ではないかもしれませんが、例で理解してみましょう:

<style>    #box1{        position: relative;        width: 200px;        height: 200px;        background: blue;    }    #box2{        position: relative;        z-index:-1;        width: 100px;        height: 100px;        background: yellow;    }</style><div id="box1">      <div id="box2"></div></div>

ここで、box は子要素 box2 が z-index:-1 を設定する場合、スタックコンテキストを作成しません。 box2 が配置される場所 コンテキストはルート要素、つまり html ルート タグです。7 階図によれば、box2 は html タグの上、通常のボックス box1 (z-index: auto) の下に表示されます。 、したがって、box2 はブロックされます。写真に示すように:

それでは、この問題を解決するにはどうすればよいでしょうか?これに対処する方法はすでにご存知だと思います。はい、box1 のカスケード コンテキストを作成すると、図に示すように、z インデックスがどれほど負であっても、box1 内の要素が box1 の背景に表示されます。

这里我用了前面说的的第一种方式去创建层叠上下文，即定位元素中z-index不为auto的元素会建立层叠上下文，可能有的同学开始纳闷了，box1的z-index小于box2的z-index，为什么box2缺显示在box1的上面呢？呵呵，这正对应了七阶图的层叠水平的关系，不明白的再仔细揣摩一下七阶图。

· 层叠水平仅在直接父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。举个例子

<style>    #box1{        z-index: 10;        position: relative;        width: 200px;        height: 200px;        background: green;    }    #box1_1{        position: relative;        z-index: 100;        width: 100px;        height: 100px;        background: blue;    }    #box2{        position: relative;        z-index: 11;        width: 200px;        height: 200px;        background: red;        margin-top: -150px;    }</style><div id="box1">    <div id="box1_1">        </div></div><div id="box2"> </div>

层叠上下文box1中的子元素box2设置z-index为100，而层叠上下文box2的z-index只有11，而实际的渲染效果却是，box2在box1和box1_1的上面，这就应了上面那就话，层叠水平仅在元素的第一个父级层叠上下文中进行，即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较，也就是活box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中（html根元素会默认创建层叠上下文），所以它们两个会进行层叠水平的比较，box2的z-index大于box1的z-index，所以我们看到的也就是下面这样，box2遮挡了box1，不在乎box1中的子元素z-index是多少，如图：

这里我对z-index的理解也就讲述完毕了，大概就说了以下这几点内容：

　　1、z-index仅在定位元素（position不等于static）中有效

　　2、七阶层叠水平图

　　3、z-index层叠水平的比较仅限于父级层叠上下文中

其次需要注意以下几点：

　　1、在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。

　　2、非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）

　　3、z-index设置数值时尽量用个位数

用了一晚上的时间整理了这篇文章，就连我自己对z-index也有了更加深刻的理解，希望对你也有帮助。如有错误 欢迎指正