プログラミング世界へよこそ

CSS z-index: 要素の積み重ね

CSS z-index: 要素の積み重ね
 
 
通常、HTML Web ページは 2 次元の平面であると考えるかもしれません。これは、ページ内のテキスト、画像、またはその他の要素が特定の順序でページ上に配置され、各要素間に重複することなく一定のギャップがあるためです。ただし、実際の Web ページは実際には 3 次元であり、要素がスタック (オーバーラップ) される場合があります.次の図に示すように、CSS の z-index プロパティを介して要素のスタック順序を設定できます。

 

図: 要素スタッキングのデモ (source: youtube.com)
図: 要素スタッキングのデモ (source: youtube.com)

各要素にはデフォルトの z-index 属性があり、z-index 属性を position 属性と組み合わせて、PhotoShop と同様のレイヤー効果を作成できます。 z-index 属性は、要素のスタッキング レベルを設定できます (要素が重なっている場合、要素が他の要素の上にあるか下にあるかに関係なく)、スタッキング レベルが高い要素は、スタッキング レベルが低い要素の前 (または上) になります。 ）。

You can create more complex web page layouts through the z-index attribute. z-index 属性のオプションの値を次の表に示します。

価値 説明
auto デフォルト値、重なり順は親要素と同じです
number 特定の値 (整数) を使用して要素の重なり順を設定します。
inherit 親要素から z-index 属性の値を継承する

要素の階層関係について、次の点に注意する必要があります。

  • position 属性を設定しない要素の場合、または position 属性の値が静的である場合、後で定義された要素が前の要素を上書きします。
  • position 属性が設定され、属性値が static でない要素の場合、これらの要素は、position 属性が設定されていないか、または position 属性値が static である要素をカバーします。
  • position 属性値が静的ではなく、z-index 属性が定義されている要素の場合、z-index 属性値が大きい要素は、z-index 属性値が小さい要素をカバーします。つまり、z-index 属性値が大きいほど、 z-index 属性値が同じ場合、後で定義された要素が以前に定義された要素を上書きします。
  • z-index プロパティは、要素が位置プロパティを定義し、プロパティ値が静的でない場合にのみ有効です。

[例] 以下は、z-index 属性の使用を示す具体的なコードです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .box-x {
            width: 150px;
            height: 350px;
            border: 1px dashed red;
            background-color: rgba(255, 153, 153, 0.7);
            float: left;
        }
        .box-y {
            width: 300px;
            height: 120px;
            border: 1px dashed green;
            background-color: rgba(179, 255, 153, 0.7);
        }
        .one {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 4;
        }
        .two {
            position: relative;
            top: 30px;
            left: 80px;
            z-index: 3;
        }
        .three {
            position: relative;
            top: -10px;
            left: 120px;
            z-index: 2;
        }
        .four {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1;
        }
        .five {
            margin-left: 100px;
            margin-top: -50px;
            background-color: rgba(255, 255, 153, 0.7);
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="box-x one">一</div>
    <div class="box-y two">二</div>
    <div class="box-y three">三</div>
    <div class="box-x four">四</div>
    <div class="box-y five">五</div>
</body>
</html>

実行結果は次の図のとおりです。

図: z-index プロパティのデモ
図: z-index プロパティのデモ
 

「CSS z-index: 要素の積み重ね」についてわかりやすく解説！絶対に観るべきベスト2動画

CSSレイアウトのPOSITION(ポジション)を分かりやすく解説！relative,absolute,fixedついでにz indexも解説！

admin