mozilla
Your Search Results

    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日

     

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

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