We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ここへジャンプ:

最も基本的な場合では、 HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。 z-index 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。

CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。

(CSS 2.1 Section 9.9.1 - Layered presentation より)

これは、 CSS のスタイル規則によって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の積み重ね順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の z-index プロパティで制御できます。

z-index を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振舞いをします。しかし、 z-index を HTML 要素の複雑な階層に適用するとき、その振舞いは理解や予測がしづらくなることがあります。これは積み重ねの規則が複雑であるためです。実際、 CSS 仕様書ではこれらの規則をもっと分かりやすく説明するために、専用の章である CSS-2.1 Appendix E が占められています。

この記事では、単純化といくつかの例によって、こうした規則の説明を行なってみます。

  1. z-index なしの積み重ね: z-index が使われていない場合の積み重ね規則。
  2. 積み重ねとフロート: 積み重ねでフロート要素がどのように扱われるか。
  3. z-index の使用 : 既定の積み重ねを変更するための z-index の使い方。
  4. スタックの文脈: スタック文脈についての覚書。
  5. スタック文脈の例 1: 2レベルの HTML 階層構造、最終レベルで z-index を使う
  6. スタック文脈の例 2: 2レベルの HTML 階層構造、すべてのレベルで z-index を使う
  7. スタック文脈の例 3: 3レベルの HTML 階層構造、2番目のレベルで z-index を使う

原典情報

  • 原著者: Paolo Lombardi
  • この記事は原著者が YappY.のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
  • 最終更新日: 2005年7月9日

著者のメモ: Wladimir Palant と Rod Whiteley、レビューありがとう。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,