--- title: CSS の z-index を理解する slug: Web/CSS/CSS_Positioning/Understanding_z_index tags: - Advanced - CSS - Guide - Reference - Understanding_CSS_z-index - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---
{{cssref}}

最も基本的な場合では、 HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。 {{cssxref("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 なしの重ね合わせ: 既定の重ね合わせ規則
  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

原典情報

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