CSS_html/css_WEB-ITnose の z-index 要素レベル属性を理解する

Z-index: 要素とそのサブ要素の Z 軸の順序を指定します。Z 要素がカバーされている場合、どれが下でどれが上であるかは、通常 Z-index によって決まります。 Z-index のサポートされる属性値は次のとおりです: z-index:auto/integer/inherit; 基本的な機能は次のとおりです: 負の値のサポート、アニメーション アニメーションのサポート。配置要素; CSS3 が考慮されていない場合、z-index は配置された要素に対してのみ機能します

z-index の使用法:

1. 配置された要素がネストされていない場合、つまり兄弟要素である場合、

2. ネストが発生する場合は、「祖先が最初」の原則に従い、親要素の z インデックスによって決定されます。親要素の -index 値は

数値 です。このとき、子要素の z-index 値は無視されます

CSS のスタック コンテキストと階層レベル: カスケード コンテキストは単純です。積み重ねられたレイヤーのセットを含む要素。Z 軸上で特定の順序を持​​ちます。インデックスが数値であるページのルート要素と z 位置の要素には、積み重ねられたコンテキストがあります。 Z 軸上の同じスタッキング コンテキスト内の要素の順序。

スタッキング コンテキストの特徴: 埋め込み可能であり、各スタッキング コンテキストはその兄弟要素から独立しています。スタッキングの変更が行われると、子要素のみが影響を受けます。

有名な 7 層のスタッキング レベル:

小さな答え: 1. なぜ inline/liline-block の階層レベルがそれよりも大きいのかフロートの？

インライン要素は通常、ページの読み込みの美しさに合わせてコンテンツを運ぶため、インライン要素はフローティング要素をカバーします

2. なぜ位置決め要素が通常の要素をカバーするのでしょうか?

位置決めされた要素 z-index:0; は、通常の要素がインライン要素または浮動要素であるため、7 層の積み重ねられた水平テーブルによれば、通常の要素と浮動要素の両方が上書きされます。 z-index:0 は z-index:auto と等しくないですか?

z-index:0; はスタッキング コンテキストを作成しますが、z-index:auto; はスタッキング コンテキストを作成しません。

その他の CSS プロパティは、スタッキング コンテキストの順序に影響します。

1. z-index の値は、auto の flex 項目ではありません。

3。要素の変換が none ではありません。

4. 要素の mix-blend-mode が正常ではありません。

5. 要素のフィルター値が none ではありません。

6.

7. モバイル側の webkit-overflow-scrolling は

の属性のいずれかに設定されます。 -index:

1. 混乱を招く Z-index のネストされたカスケード関係を避けるために、位置決め属性の使用を避けるようにしてください。

2. 非浮動層要素の場合は、設定を避けてください。 z-index 値が 2 (通常は 0、1、2) を超えるようにするには、DOM ノードのブック順序を調整します。

3. フローティング レイヤー コンポーネントがカバーされないようにするため。 z インデックス値が高い要素ごとに、JS を通じてボディの下のサブ要素レベルの最大数を取得し、フローティング レイヤーの z インデックス値を +1 に設定します

4: アクセシビリティの非表示: z -index: -1;

参考: http://www.zhangxinxu.com/wordpress/?p=5115