CSS カスケードコンテキストとは何ですか?また、それらはどのように機能しますか? _html/css

CSS カスケードコンテキストとは何ですか?また、それらはどのように機能しますか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:56:09

オリジナル

1108 人が閲覧しました

CSS カスケードコンテキストは、多くの開発者に問題を引き起こしています。 CSS マスターでレイアウトの章を書き終えるまでは、それらを完全に理解したとは言えません。もちろん、要素の z-index 属性を有効にするには、position 属性が静的でないことが必要であることは理解していますが、これは、Philip Walton の「Z-Index について誰も教えてくれないこと」を何度も読んだ後でした。それ。

フィリップを悪く言うつもりはありません。先ほども言いましたが、コンテキストをカスケードするのは難しいです。

では、カスケードコンテキストとは何でしょうか?スタッキングコンテキストは、積み重ねられたレイヤーのセットを含む要素です。これは、HTML 要素によって作成されたルートスタッキングコンテキスト、または特定の属性と値によって作成されたローカルスタッキングコンテキストにすることができます。

「多数のレイヤーが含まれている」という奇妙な表現ですが、これは単純な概念です。ローカルスタッキングコンテキストでは、子要素の z-index は、ドキュメントのルート要素ではなく親要素に基づいて設定されます。このコンテキストの外側のレイヤー (ローカルスタッキングコンテキストの隣接する兄弟要素など) は、そのコンテキスト内のレイヤーの間に存在することはできません。

これが例です。トグルボタンを使用して、A 要素のローカルスタッキングコンテキストをトリガーまたはキャンセルします。

この例では、#a p 要素 (A の子要素) の z-index は 1、#a の z-index は 1 です。要素と #b 要素値は auto です。 #a p 要素には正の z-index 属性があるため、ルートスタッキングコンテキスト内の #a 要素および #b 要素の上にあります。

ただし、#a 要素のtransform属性値をnoneからscale(1)に変更すると、ローカルのカスケードコンテキストがトリガーされます。 #a p 要素の z-index 値は、ドキュメントのルート要素ではなく #a 要素に基づいて計算されるようになります。

ルートスタッキングコンテキストとローカルスタッキングコンテキストは両方とも、一連のルールに従って要素のスタッキングと描画順序を決定します。スタッキングコンテキストの子要素は下から上の順序で描画されます。

1. 負のスタックレベルを持つ要素 (通常は z-index:-1 を持つ要素)。 2. 位置属性値が静的である要素。 3. レベル 0 の要素をスタックします。通常は z-index:auto の要素です。 4. z-index 属性値が 1 以上の要素など、正のレベルを持つ要素をスタックします。

2 つの要素のスタックレベルが同じ場合、ソースファイルに出現する順序でスタックされます。後続要素は先行要素の上に積み重ねられます。

いくつかの CSS プロパティと値により、新しいカスケードコンテキストがトリガーされます。属性値が 1 未満の場合は opacity 属性 (例: .99)、属性値が none でない場合は CSS 混合モード属性 mix-blend-mode が含まれます。それは正常です。

ご想像のとおり、transform 属性はカスケードコンテキストをトリガーできますが、それはその属性値が none ではない場合に限られます。これには、プロパティ値scale(1)やtranslate3d(0,0,0)などの恒等変換[1]が含まれます。

上記の例では、#a 要素と #b 要素のスタックレベルは同じですが、#b 要素はソースファイルの 2 番目の要素です。変換:scale(1) が適用されると、#a p は #a 要素のローカルコンテキスト内に含まれるようになります。その結果、要素 #b がスタックの最上位に上がります。

[1] ID 遷移は要素に視覚的な影響を与えませんが、新しいカスケードコンテキストをトリガーします。