CSS におけるスタックコンテキストの具体的な使用法

序文

一部の CSS 相互作用の影響により、要素に設定されたz-index実際のサイズに応じて重ね合わされません。その背後にある原理をこれまで理解していませんでした。最近、関連情報を特別に確認し、簡単にまとめました。

スタックコンテキストとスタック順序

スタッキングコンテキストは、HTML における 3 次元の概念、つまり要素の Z 軸です。積み重ね順序とは、積み重ねたときの特定の垂直表示順序を指します。

カスケード基準

年上の方が先に行く

識別されたz-indx値などの明示的なスタッキングレベルの指示がある場合、同じスタッキングコンテキスト内で、スタッキングレベル値が大きい方が、スタッキングレベル値が小さい方よりも優先されます。

後ろから来る

要素のスタックレベルが一貫しており、スタック順序が同じである場合、DOM フロー内の後の要素が前の要素をカバーします。

スタッキングコンテキストの特徴

スタッキングコンテキストには次の特性があります。

スタッキングコンテキストは、通常の要素よりもスタッキングレベルが高くなります。
スタックコンテキストは要素のブレンドモードをブロックする可能性があります。
スタッキングコンテキストはネストすることができ、内部のスタッキングコンテキストとそのすべての子要素は外部のスタッキングコンテキストの対象となります。
各スタッキングコンテキストは兄弟要素から独立しているため、スタッキングの変更やレンダリングを実行するときは、子孫要素のみを考慮する必要があります。
各スタッキングコンテキストは自己完結的です。要素がスタックされると、要素全体が親スタッキングコンテキストのスタック順序にあると見なされます。

z-index値がautoでない場合は、スタッキングコンテキストが作成される。

position: relative; position: absolute;を含む配置された要素、および FireFox/IE ブラウザーでposition宣言がある要素の場合、 z-index値がautoでない場合、スタックコンテキストが作成されます。

HTMLコード

<div class="red-wrapper">
    <div class="red">シャオホン</div>
</div>
<div class="gray-wrapper">
    <div class="gray">リトルグレイ</div>
</div>

CSSコード

.red-wrapper {
    位置: 相対的;
    zインデックス: 自動;
}

。赤 {
    位置: 絶対;
    zインデックス: 2;
    幅: 300ピクセル;
    高さ: 200px;
    テキスト配置: 中央;
    背景色: 茶色;
}

.gray-wrapper {
    位置: 相対的;
    zインデックス: 自動;
}  

.グレー{
    位置: 相対的;
    zインデックス: 1;
    幅: 200ピクセル;
    高さ: 300px;
    テキスト配置: 中央;
    背景色: グレー;
}

2 つの兄弟要素のz-indexがautoの場合、それらは通常の要素であり、子要素は「大きい方が上」という原則に従うため、灰色のz-index: 1;は赤色のz-index: 2;に負けて押し下げられます。

ただし、 z-index数値になると、スタッキングコンテキストが作成され、各スタッキング要素は互いに独立し、子要素は親要素のスタッキング順序に従います。兄弟要素のz-index autoから0の値に変更すると、子要素間の積み重ね関係は子要素自身のz-indexの影響を受けなくなり、親要素のz-indexによって決定されるようになります。

下のXiaohongとXiaohuiの親のz-index 0に調整されています

.red-wrapper {
    /* その他のスタイル */
    zインデックス: 0;
}  

.gray-wrapper {
    /* その他のスタイル */
    zインデックス: 0;
}

ドキュメントフローの要素位置の「後者が上になる」という原則に従って、Xiaohui の親と Xiaohong の親が同じスタックレベルを持つスタックコンテキスト要素になったため、Xiaohui が Xiaohong の上にあることがわかります。

CSS3 のスタックコンテキストへの影響

display: flex|inline-flex とスタックコンテキスト

親がdisplay: flexまたはdisplay: inline-flex;であり、子要素のz-index autoではない。このとき、この子要素（ここでは子要素であることに注意してください）がスタックコンテキスト要素となります。

HTMLコード

<div class="wrapper">
    <div class="gray">
        リトルグレー<div class="red">リトルレッド</div>
    </div>
</div>

CSSコード

.ラッパー{
    ディスプレイ: フレックス;
}

.グレー{
    zインデックス: 1;
    幅: 200ピクセル;
    高さ: 300px;
    テキスト配置: 中央;
    背景色: グレー;
}  

。赤 {
    Zインデックス: -1;
    幅: 300ピクセル;
    高さ: 200px;
    テキスト配置: 中央;
    背景色: 茶色;
    位置: 相対的;
}

このように、Xiaohui の親にはdisplay: flex;があるため、自身のz-index autoではないため、スタックコンテキスト要素となり、元の Xiaohong の下部が Xiaohui に置き換えられます。

ミックスブレンドモードとスタッキングコンテキスト

mix-blend-modeプロパティを持つ要素はスタッキングコンテキスト要素である。

CSS プロパティ mix-blend-mode を使用すると、重ね合わせた要素のコンテンツと背景をブレンドできます。

コードは上記と同じです。グレーにmix-blend-mode属性を追加するだけです。ブレンド効果を確認するには、外側のコンテナーに背景画像を追加します。

.ラッパー{
    背景画像: url("./jz.png");
}

.グレー{
    /* その他のスタイル */
    ミックスブレンドモード: 暗くする;
}

同様に、Xiaohui にはmix-blend-mode属性があり、これによりスタックコンテキスト要素となり、Xiaohui が最下位の要素になります。

不透明度とスタッキングコンテキスト

要素のopacity 1 でない場合、その要素はスタックコンテキスト要素です。

HTMLコード

<div class="gray">
    リトルグレー<div class="red">リトルレッド</div>
</div>

CSSコード

.グレー{
    zインデックス: 1;
    幅: 200ピクセル;
    高さ: 300px;
    テキスト配置: 中央;
    背景色: グレー;
    不透明度: 0.5;
}

。赤 {
    Zインデックス: -1;
    幅: 300ピクセル;
    高さ: 200px;
    テキスト配置: 中央;
    背景色: 茶色;
    位置: 相対的;
}

灰色の要素にはopacityプロパティがあるため、スタックコンテキスト要素となり、赤色の要素z-index: -1;もそれを貫通できません。

変換とスタックコンテキスト

transformが適用される要素はスタッキングコンテキスト要素である

コードは上記と同じですが、 transformグレーに適用される点が異なります。

.グレー{
    /* その他の関連スタイル */
    変換: 回転(30度);
}

同様に、灰色の要素はtransform変換を適用することでスタックコンテキスト要素に変換されるため、赤色の要素z-index: -1;もそれを貫通できません。

フィルターとスタックコンテキスト

filter属性を持つ要素はスタックコンテキスト要素である

コードは上記と同じですが、 filter属性が Xiaohui に追加されています。

.グレー{

    /* その他の関連スタイル */
    フィルター: ぼかし(5px);
}

同様に、灰色の要素にはfilter属性があり、スタックコンテキスト要素になるため、 z-index: -1;赤い要素は灰色の要素の上にあります。

変化とスタッキングコンテキスト

will-change属性を持つ要素は、スタックコンテキスト要素です。

コードは上記と同じですが、 will-change属性が gray 要素に追加されています。

.グレー{
    /* その他の関連スタイル */
    フィルター: will-change;
}

結果は上記と同じです。

要約する

要素のスタッキングルール全般を理解するには、まず要素がスタッキングコンテキスト要素であるかどうかを理解する必要があります。

配置属性 position: relative|absolute|fixed; を持ち、z-index が auto ではない要素 (Webkit ベースのブラウザーでは、固定配置にはこのような制限はありません) は、スタックコンテキスト要素です。
要素には、スタックコンテキスト要素になることができる CSS3 プロパティがいくつかあります。
親はdisplay: flex|inline-flex; 子要素のz-indexはautoではない。このとき、この子要素（ここでは子要素であることに注意）はスタックコンテキスト要素である。
mix-blend-modeプロパティを持つ要素
不透明度属性が1でない要素
変換された要素
フィルター属性を持つ要素
will-change属性を持つ要素

次に、スタッキング原則を理解する必要があります。「大きい方が上になる」、「後のものが上になる」、そして最後にスタッキングコンテキストの主な特性を理解する必要があります (詳細については、スタッキングコンテキストの特性に関する記事を参照してください)。

CSS におけるスタックコンテキストの具体的な使用法については、これで終わりです。CSS スタックコンテキストに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vueはローカルストレージの追加、削除、変更機能を実装します

>>: IE6 の select を div でカバーできないバグの解決方法