CSS の z-index の理解

通常、HTML ページは二次元であると考えられます。テキストや画像、その他の要素はページ上に、重なりあうことなく並べられるからです。描画処理の流れは一つだけで、どの要素も、どこに他の要素が置かれるのかわかっています。

CSS 2.1 では、ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、その上に作られた"z軸"  に沿って位置します。Z軸座標は特に、ボックス同士が視覚的に重なる場合に意味を持ちます。

(CSS 2.1 Section 9.9.1 - Layered presentation より)

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

z-index を使うのは非常に簡単です: プロパティは一つ、代入される整数値は一つだけで、わかりやすい振る舞いをします。しかしながら、複雑な階層構造を持つ HTML 要素に z-index が使われると、動作の理解や予測がしづらくなる可能性があります。これは、スタック(積み重なり)規則が複雑なためです。実際に、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 を使う

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

原典情報

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

 

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,