翻訳元：ホールマスターブログ
2009 年 9 月 15 日に Louis Lazaris によって発行された「 The Z-Index CSS Property: A Comprehensive Look 」を翻訳した、非常に優れた技術文書です。私のような多くのフロントエンド愛好家にとって役立つと信じています。
すべての著作権は原作者が留保します。
JP の記事は良くありません。批判は歓迎です。
-------------------------------------------------- ------
ほとんどの CSS プロパティは使いやすいです。多くの場合、マークアップ言語の要素で CSS プロパティを使用すると、ページを更新するとすぐに結果が表示されます。他の CSS プロパティはより複雑で、特定の状況でのみ機能します。
Z-index 属性は、前述の後者のグループに属します。 Z インデックスは間違いなく、他のどの属性よりも頻繁に混乱 (互換性) やフラストレーション (開発者心理) を引き起こします。しかし面白いことに、一度 Z-index を本当に理解すると、それが非常に使いやすいプロパティであり、レイアウト上の多くの課題を解決する強力な助けとなることがわかります。
この記事では、Z インデックスとは何なのか、なぜこれほど理解されていないのかを正確に説明し、その使用に関するいくつかの実際的な問題について説明します。また、遭遇するブラウザごとの違いや、IE と Firefox の既存のバージョンに存在する固有の問題についても説明します。 Z-index 属性に関するこの包括的な観点は、開発者に Z-index 属性を使用する際の自信の優れた基盤と強力な支援を提供します。
これは何ですか？
Z-index 属性は、HTML 要素のスタック レベルを決定します。要素のスタック レベルは、(X 軸または Y 軸ではなく) Z 軸上の要素の位置に相対します。 Z インデックスの値が大きいほど、要素が積み重ね順序の一番上に近くなります。この階層化シーケンスは、垂直の糸軸に沿って表示されます。
Z インデックスがどのように機能するかをより明確に示すために、上の画像は積み重ねられた要素の視覚的な位置を誇張しています。
自然なレイヤリングシーケンス
HTML ページでは、自然な積み重ね順序 (つまり、Z 軸上の要素の順序) は多くの要因によって決まります。以下は、リスト項目をスタッキング コンテキストで表示するリストです (適切な中国語訳はまだ見つかりません。これらの項目は、スタッキング コンテキストにあるスタッキング環境を参照する必要があります)。環境の。このリスト内の項目には、Z インデックス属性が割り当てられていません。
要素の背景と境界線がスタッキングコンテキストを作成します
引用：
・負の値を持つスタッキングコンテキスト要素を出現順に並べます（後のレベルほど上位になります）
· 配置またはフローティングされていないブロック レベルの要素は、出現順に配置されます。
·配置されていないフローティング要素は、出現順に配置されます。
・インライン要素は出現順に並べます。
・配置された要素は出現順に並べられます。
Z-index プロパティを正しく使用すると、自然な積み重ね順序が変更されます。
もちろん、要素が互いに重なり合うように配置されていない限り、要素の積み重ね順序は特に明らかではありません。以下に、自然なスタッキング シーケンスを示すために、負のマージンを持つボックスを示します。
上のボックスは異なる背景色と境界線の色で定義されており、後の 2 つは互い違いに配置され、負の上部マージンを定義しているため、自然な積み重ね順序がわかります。マークの1位がグレーのBOX、2位がブルーのBOX、3位がゴールドのBOXです。適用された負のマージンは、これらの要素に Z インデックス プロパティ セットがないという事実を明確に示しています。その積み重ね順序は自然、つまりデフォルトの複合ルールです。インタレース現象は、負のマージンによって発生します。