CSS の z-index 属性の具体的な分析

カスケード コンテキスト: Z 軸上の要素の位置を表す 3 次元の概念

スタックをネストして階層コンテキストに結合することができます
各カスケード コンテキストは、カスケード変更またはレンダリングを実行するとき、その兄弟要素から独立しています。子孫要素のみが考慮されます
それぞれ 各カスケードの上部と下部は自己完結型です

積み重ね順序

1 background~border
2 负z-index
3 block盒子
4 float浮动盒子
5 inline/inline-block盒子
6 z-index:auto/z-index:0
7 正z-index

機能

負の値をサポート
サポート CSS3 アニメーション
css2.1 では、位置決めされた要素と一緒に使用されます
位置決めされた要素など z-index ネストが発生します: 最後に来る原則、大きい方が先に進みます
ネストが発生した場合: 祖先優先の原則、前提条件は z-indexは auto の代わりに数値です。auto はカスケード コンテキストを作成しません

は要素の位置決めに

を使用します デフォルト z-index: auto; /z-index: 0
z-index If配置された要素は auto ではないため、スタッキング コンテキストが作成されます
z-index スタッキング順序の比較は親のスタッキング コンテキストで停止します
z-index のネストされた階層関係の混乱を回避します z-index
の混乱を回避します瞬く間に山が高くそびえるようなスタイルの問題 負の値は非表示に使用できます

以上がCSS の z-index 属性の具体的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。