CSS 内の要素の重なり順を解析する

• z-index 属性 と position 属性が含まれていない場合、すべての要素の積み重ね順序は、HTML ドキュメント内での出現順序と一致します。 (負のマージンを使用してインライン要素をオーバーラップする特殊な場合を除きます。)

• 要素がフローティングの場合、フローティング ブロック要素は、非配置ブロック要素と配置ブロック要素の間に配置されます。フローティング要素は、通常フローでは子孫ブロック要素の上、通常フローでは子孫インライン要素の下に表示されます。

• position 属性が要素に追加されると、position 属性を持つすべての要素とそのサブ要素は、position 属性のない他の要素の上に表示されます。

• z-indexは、position属性が設定されている要素に対してのみ有効です、position属性が設定されていない要素のz-index属性は無効です。

z-index 属性はスタッキングコンテキストを生成します

共通の親要素を持つ要素のグループが一緒に前後に移動されてスタッキングコンテキストを形成します。各スタッキング コンテキストには 1 つのルート要素があります。要素上に新しいスタッキング コンテキストが形成されると、スタッキング コンテキスト内のすべての子要素は、スタッキング順序の固定領域に制限されます。スタッキング コンテキストは全体を形成し、その内部要素は相対的に異なるスタッキング順序を持っていますが、他のスタッキング コンテキストと比較した場合、全体としては上または下にのみ移動できます。

平たく言えば、要素がそのスタッキング コンテキストの一番下に配置されている場合、その要素の z-index が無限大に設定されている場合でも、それをより高いレベルの別のスタッキング コンテキスト要素の上に表示する方法はありません。 。

スタッキングコンテキストの構築ルール

• document

• 要素のルート要素には(

  static属性に加えて)position属性があり、z-index属性はautoに設定されます。

• 要素には不透明度属性があり、値

  は1未満です。

• フィルター、css-regions、およびオフスクリーンレンダリングを必要とするその他の属性などのいくつかの新しい CSS 属性により、要素がスタッキングコンテキストを形成できるようになります。

• position:fixedを指定する要素の場合、技術的なz-indexはautoです

同じ積み重ねコンテキスト内のサブ要素の積み重ね順序

下から上へ(root < -index

1. スタッキングコンテキストのルート要素。

2. position属性が設定されており、負のz-indexを持つ要素とそのサブ要素、z-index値が大きい要素が小さい要素の上に配置され、同じ属性値を持つ要素はHTML スタックに表示される順序で。

3. 位置が設定された要素はありません。

4. Position 属性が設定され、z-index 属性が auto に設定された要素。

5. Position 属性が設定され、z-index 属性が正の値に設定された要素。

異なるスタッキングコンテキストの場合

• スタッキングコンテキストは他のスタッキングコンテキストを埋め込むことができます。

• 各スタッキング コンテキストとその統計コンテキストは独立しています。

• スタッキングコンテキスト内のサブ要素は、上記の順序で配置されます。

• スタッキング コンテキスト内の子スタッキング コンテキストの z-index は、親スタッキング コンテキスト内でのみ意味を持ちます。

なんと奥深く、めったに研究されることのない知識の領域です。ゆっくりと実際に適用して要約してください。

【関連おすすめ】

1.

無料のCSSオンラインビデオチュートリアル

2.

CSSオンラインマニュアル

3.

php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSS 内の要素の重なり順を解析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。