CSS スタッキングと Z インデックスのサンプルコード

カスケードとカスケードレベル

HTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z 軸」上にも積み重ねられます。
これは重ね合わせであるため、順序の問題が伴い、仕様では「カスケードレベル」と呼ばれます。
デフォルトでは、画像とテキストが Web ページの中核となるため、インライン要素のレベルが最も高くなります。次にレイアウトが続きます。レイアウトでは、フローティング要素 (ドキュメントフロー外) のレベルがブロックレベル要素よりも高くなります。最も低いレベルは、背景や境界線などの装飾属性を設定する要素です。

例：

<スタイル>
    .f {
        背景色: #ccffcc;
        境界線: 1px 破線 #669966;
        パディング: 10px;
    }
    
    .f div:最初の型、
    .f div:最後の型 {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 200ピクセル;
        高さ: 70px;
        左マージン: 10px;
    }
    
    .f div:最後の型 {
        背景色: rgba(221, 221, 255, .8);
        境界線: 1px 破線 #000099;
        フロート: 左;
        上マージン: -90px;
        左マージン: 30px;
    }
    
    ラベル {
        背景色: rgba(247, 236, 27, 0.8);
        境界線: 1px 破線 #FFC107;
        パディング: 5px;
    }
</スタイル>

<div class="f">
    <label>こんにちは</label>
    <div></div>
    <div></div>
</div>

要素が重なる場合、スタッキングレベルが高い要素が小さい要素を覆います。2 つの要素のスタッキングレベルが同じ場合は、レンダリング順序に従って後者が前者を覆います。

例：

<スタイル>
    .f {
        背景色: #ccffcc;
        境界線: 1px 破線 #669966;
        パディング: 10px;
        オーバーフロー: 非表示;
    }
    
    .f div:最初の型、
    .f div:最後の型 {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 200ピクセル;
        高さ: 70px;
        フロート: 左;
    }
    
    .f div:最後の型 {
        背景色: rgba(221, 221, 255, .8);
        境界線: 1px 破線 #000099;
        上マージン: -40px;
        左マージン: 30px;
    }
</スタイル>

<div class="f">
    <div></div>
    <div></div>
</div>

z-indexはスタックレベルに影響を与える可能性がある

要素のスタックレベルを変更する必要がある場合は、配置された要素 (1) で z-index を使用できます。

z-index は正の整数、0、または負の整数にすることができます。z-index がない場合 (デフォルトの z-index:auto)、または z-index が手動で auto に設定されている場合、0 として扱われます。

*(1) 位置値が相対的、絶対的、または固定である要素を指します。

例：

<スタイル>
    .f {
        背景色: #ccffcc;
        境界線: 1px 破線 #669966;
        パディング: 10px;
        位置: 相対的;
        zインデックス: 0;
    }
    
    .f div:最初の型、
    .f div:最後の型 {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 200ピクセル;
        高さ: 70px;
        左マージン: 10px;
    }
    
    .f div:最後の型 {
        背景色: rgba(221, 221, 255, .8);
        境界線: 1px 破線 #000099;
        左マージン: 30px;
        位置: 絶対;
        上: 14px;
        /* zインデックス: -1; */
    }
    
    ラベル {
        背景色: rgba(247, 236, 27, 0.8);
        境界線: 1px 破線 #FFC107;
        パディング: 5px;
    }
</スタイル>

<div class="f">
    <label>こんにちは</label>
    <div></div>
    <div></div>
</div>

z-index が正の整数、0、または auto の場合:

z-index が負の整数の場合:

注意深い人なら、この例では、装飾要素 (クラス名 f) の配置属性が設定され、z-index が 0 に設定されていることに気付くでしょう。これが設定されていない場合、要素 (青い背景のテスト要素) の z-index が負の整数になると、装飾要素の背後に実行されます。この点については、後ほど「z-index は負の整数値を取る」という話になります。

z-indexとスタッキングコンテキスト

z-index はスタッキングレベルに影響を与える可能性がありますが、非常に重要な前提条件があります。つまり、比較に関係する要素は同じレベルにある必要があり、仕様ではこれを「スタッキングコンテキスト」と呼びます。「コンテキスト」とは、これが閉じた領域であり、領域内の子要素が外部の要素に影響を与えないことを意味します。また、「スタック」とは、要素がこの領域を作成する限り、それが「Z 軸」上の現在のコンテキストよりも高くなることを意味します。
スタッキングコンテキストは、いくつかの CSS プロパティを使用して作成できます。一般的なプロパティは次のとおりです。

html 要素は、ルートスタッキングコンテキストと呼ばれるデフォルトのスタッキングコンテキストを作成し、すべての要素はこのレイヤーに配置されます。
位置値は相対または絶対であり、z-index値はauto(1)ではありません。
位置値は固定です。
不透明度値が 1 以外、変換値が none 以外、z-index 値が auto 以外の flex レイアウト要素や grid レイアウト要素などの新しい CSS3 プロパティ。

*(1) z-index:auto と z-index:0 は同じものとみなすことができますが、z-index:auto の要素は通常の位置指定要素であるのに対し、z-index:0 はスタックコンテキストを作成します。 2 つが同じレベルの場合、後者が前者を上書きします。

実際の作業では、新しい CSS3 プロパティがスタッキングコンテキストを積極的に作成するために使用されることはほとんどありません。したがって、スタッキングコンテキストを作成する最も一般的な方法は、配置された要素の z-index 整数値を設定することです。
前述のように、z-index は現在のスタックコンテキスト内の要素のスタックレベルを変更できます。z-index には別の意味があり、新しいスタックコンテキストを作成することもできます。
以下の例を通して、スタッキングコンテキストをよりよく理解できます。

例：

<スタイル>
    .f {
        背景色: #ccffcc;
        境界線: 1px 破線 #669966;
        高さ: 80px;
        位置: 相対的;
        下マージン: 10px;
    }
    
    .f_1>div {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 150ピクセル;
        高さ: 200px;
        位置: 絶対;
        上: 20px;
        左: 170px;
    }
    
    .f_2>div {
        背景色: rgba(221, 221, 255, .8);
        境界線: 1px 破線 #000099;
        幅: 200ピクセル;
        高さ: 70px;
        位置: 絶対;
        上: 65px;
        左: 50px;
    }
</スタイル>

<div class="f f_1">#1
    <div>#3
    </div>
</div>
<div class="f f_2">#2
    <div>#4
    </div>
</div>

この例では、z-index 値を設定する要素はありません。この場合、z-index はデフォルトの auto です。したがって、要素は後者が前者をカバーする順序でレンダリングされます。
次のように、#3 と #4 に正の z-index 値を設定すると、

.f_1>div {
    zインデックス: 1;
}

.f_2>div {
    zインデックス: 2;
}

この時点では、親要素 #1 と #2 には z-index 値が設定されていないため、新しいスタックコンテキストは作成されません。つまり、#3 と #4 は依然としてルートスタックコンテキストに属します。
同じスタッキングコンテキストでは、スタッキングレベルが大きい要素が小さい要素をカバーするため、#4 はすべての要素の上にあります。
ここで、#2、#3、#4 の z-index 値を次のように設定します。

.f_1>div {
    zインデックス: 2;
}

.f_2 {
    zインデックス: 1;
}

.f_2>div {
    zインデックス: 9;
}

#4 の z-index 値は #3 より大きいですが、#4 は #2 の子要素であるため、そのスタックレベルは完全に #2 のレベルに従います。 #2 と #3 は同じルートスタッキングコンテキストに属しており、#3 は #2 より大きいため、#3 は #2 (およびその子要素) の上にあります。

z-indexは負の整数値を取る

一般的に、z-index が負の値を取る場合は、背景色の背後に配置する必要があることが理解されています。

例：

<スタイル>
    .f {
        背景色: rgba(204, 255, 204, .8);
        境界線: 1px 破線 #669966;
        パディング: 10px;
    }
    
    .f div {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 200ピクセル;
        高さ: 70px;
        位置: 相対的;
        上: 45px;
        Zインデックス: -1;
    }
</スタイル>

<div class="f">
    <div></div>
</div>

実際の作業では、負の z-index 値を使用すると、要素を非表示にする効果が得られます。ただし、親要素のスタッキングコンテキストを作成すると、子要素は非表示になりません。

例：

<スタイル>
    .f {
        背景色: rgba(204, 255, 204, .8);
        境界線: 1px 破線 #669966;
        パディング: 10px;
        位置: 相対的;
        zインデックス: 0;
    }
    
    .f div {
        背景色: rgba(255, 221, 221, .8);
        境界線: 1px 破線 #990000;
        幅: 200ピクセル;
        高さ: 70px;
        位置: 相対的;
        上: 45px;
        Zインデックス: -1;
    }
</スタイル>

<div class="f">
    <div></div>
</div>

前後の例を比較すると、z-index がどれだけ負の値であっても、現在のスタッキングコンテキストを突破できないことは明らかです。

CSS スタッキングと z-index サンプルコードに関するこの記事はこれで終わりです。CSS スタッキングと z-index に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

>>: HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します