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

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 遷移は要素に視覚的な影響を与えませんが、新しいカスケード コンテキストをトリガーします。

著者について: Eric.M.Y.H

フロントエンドの包囲ライオンである彼は、イギリスとインド大国に旅行し、CS コースを学び、自然言語処理に関する知識。個人ホームページ · 私の記事 · 17 ·