前書き: カスケード コンテキストに関して、著者はより本質的な原則を理解するために、より詳細な W3C 仕様を読んでいません (申し訳ありませんが、学校が採用活動を行ってオファーを受け取ったら勉強します T_T)。 CSS3 のカスケード コンテキストについて何か新しいことがあるということはよく聞いていましたが、適切な参考資料が見つからなかったので、自分で試してみました。著者のレベルが限られているため、記載漏れや誤りがある場合は、読者の皆様におかれましては修正をお願いいたします。
1 CSS2.1 で指定されたスタッキング コンテキスト
スタッキング コンテキストを形成する要素の最下位レベル。
のスタッキング コンテキスト。負の z-index を持つ子孫要素
ブロック レベル ボックス ? インフローの非インライン レベルの非配置子孫。
非配置フロート
インフローインラインレベルの非配置子孫 Z-index: 0
? これらは新しいスタッキングコンテキストを形成します。 正の Z-index 画像とテキストのソース: http:// webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
今度は著者が翻訳する時間です!上記の用語を説明する前に、2 つの用語を明確にする必要があります。「位置指定」は、位置が相対的、絶対的、または固定である要素を指し、「非位置指定」はその逆です。
背景と境界線
: カスケードコンテキスト要素の背景と境界線を作成します。スタックの最下位レベル
負の Z インデックス
: 負の Z-インデックスを持つ子孫要素に対して確立されたスタックコンテキスト
ブロックレベルボックス: 非インラインレベル、非配置の子孫要素ドキュメントフロー内
フローティングボックス: 位置決めされていないフローティング要素 (作成者注: 位置:相対のフローティングボックスは除外されます)
インラインボックス: ドキュメントフロー内のインラインレベルの位置決めされていない子孫要素ドキュメントフロー
Z-index:0:要素を配置します。これらの要素は、新しいスタッキング コンテキストを確立します (著者注: 必ずしも必要というわけではありません。詳細については以下を参照してください)
正の Z-index: (z-index は正です) 位置決めされた要素。最高レベルのカスケード
-
引用は上にリストされています。ただし、著者は、要素を「Z-index: 0」レベルに配置しても、必ずしも新しいカスケード コンテキストが作成されるわけではないことを読者に思い出させています。理由:
CSS2.1: (z-index: auto) 現在のスタッキング コンテキストで生成されたボックスのスタック レベルは 0 です。ボックスは、ルート要素でない限り、新しいスタッキング コンテキストを確立しません。 -
要素 z-index: auto を配置する場合、現在のスタッキング コンテキストで生成されるボックスのレベルは 0 です。ただし、ボックスはルート要素でない限り、新しいスタッキング コンテキストを作成しません。 仕様はこんな感じですが、IE6-7では位置指定要素がz-index:autoであってもカスケードコンテキストを作成してしまうバグがあります。
上記は、CSS2.1 に基づくカスケード コンテキストの概要です。以下に、新しい CSS3 環境におけるカスケード コンテキストの新しい変更を示します。
2 CSS3 によってもたらされる変更点
一般に、変更点は 2 つの点に分類できます。後で 1 つずつ説明します:
CSS3 の多くのプロパティはローカル カスケード コンテキストを作成します
属性の変更を絶対に変換します位置決めされた子要素 包含ブロック
2.1 新しいカスケード コンテキストを生成する状況
次の状況では、新しいカスケード コンテキストが生成されます:
ルート要素 (HTML)
絶対または相対位置と z -index 値が auto
A Flex アイテムではなく、z-index 値が auto ではありません。つまり、親要素の表示: flex|inline-flex
要素の不透明度属性値が小さいです。 1より
要素のtransform属性値がnoneではない
要素のmix-blend-mode属性値が通常ではない
要素のfilter属性値が通常ではない
要素のisolation属性値is isolate
position:fixed
-
will-change は、これらの属性を直接定義していない場合でも、上記の属性のいずれかを指定します
要素の -webkit-overflow-scrolling 属性値は touch です
-
上記のリストは次から翻訳されています: -
https:/ /developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context、読者には中国語版を読まないように注意してください。中国語版はリアルタイムで更新されず、翻訳もあまり正確ではないためです
2.2 スタッキングコンテキストのレベルを上げる-
上記の要素が新しいスタッキングコンテキストを作成するとき、それらはスタッキングコンテキストのレベルも上げます要素自体がそこに配置されます。
不透明度を例に挙げてみましょう。 CSS3 仕様の内容を見てみましょう:
不透明度が 1 未満の要素が配置されていない場合、実装は、親のスタック コンテキスト内で、「z-index: 0」で配置された要素の場合に使用されるのと同じスタック順序で、作成するレイヤーをペイントする必要があります。 ' および 'opacity: 1'。不透明度が 1 未満の要素が配置されている場合、[CSS21] で説明されているように 'z-index' プロパティが適用されます。ただし、新しいスタッキング コンテキストのため 'auto' は '0' として扱われます。は常に作成されます。
要素の不透明度が 1 未満で、配置されていない場合、配置されている場合のスタック順序 (z-index: 0、不透明度: 1) で親のスタック コンテキストに描画する必要があります。 。不透明度が 1 未満で位置決めされている場合、CSS2.1 に従って z-index プロパティが適用されますが、新しいスタッキング コンテキストが常に作成されるため、auto は 0 として扱われます。
次のケース:
div { width: 100px; height: 100px;}#box1 { position: absolute; background: red; top: 40px; left: 40px;}#box2 { background: blue;}<body> <div id="box1"></div> <div id="box2"></div><body>ログイン後にコピー
上記の CSS および HTML フラグメントでは、box1 は絶対位置にあり (レベルは「Z-index: 0」)、box2 はドキュメント フロー内のブロック レベルのボックス (レベルは「Z-index: 0」) であるため、は「ブロックレベルボックス」レベルです)、したがって、box1 は box2 の上に積み重ねられます。以下の CSS ルールを追加します:
#box2 { opacity: .5;}ログイン後にコピー
この時点で、box2 は box1 の上に重ねられます。 box2 の不透明度は 0.5 (1 未満) であるため、box1 と同じレベルである「Z-index: 0」レベルとみなされます。同レベルの場合、ソースコード上の両者の順序に従い、後方にあるbox2が高台に戻ります。
読者は、同じ効果を達成するために次のルールのいずれかを試してみることができます:
#box2 { transform: scale(1); mix-blend-mode: difference; isolation: isolate; -webkit-filter: blur(5px);}ログイン後にコピー
2.3 変換は、ブロックを含む絶対位置のサブ要素を変更します
transform 新しいローカル スタッキング コンテキストを作成することに加えて、もの: 子要素のブロックを含む絶対配置を変更します。固定位置決めも絶対位置決めの一種であることに注意してください。
包含ブロックとは何ですか?場合によっては、ボックスがブロックを含む長方形のボックスに基づいて位置とサイズを決定することがあります。詳細については、ビジュアル フォーマット モデルの説明をお読みください。
固定位置の要素
固定位置の要素を含むブロックは、ビューポートによって作成されます (読者が視覚的書式設定モデルで詳細に説明されている情報を理解していれば、次のことがわかるでしょう: その「静的位置」を計算するとき、包含ブロックを計算された包含ブロックとして初期化します)。次に、次のソース コードを見てみましょう:
div { width: 100px; height: 100px;}#fixed { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: blue;}#transform { background: red; padding: 20px;}<body> <div id="transform"> <div id="fixed"></div> </div></body>ログイン後にコピー
この時点では、位置決めとサイズ計算のための包含ブロックとしてビューポートを使用しており、固定は画面全体をカバーします。
ここで、次のルールを追加します:
#transform { transform: scale(1);}ログイン後にコピー
ログイン後にコピー
この時点で、fixed を含むブロックはビューポートではなくなり、変換のパディング ボックスのエッジ ボックスになります。したがって、この時点ではfixedの幅と高さは両方とも140pxになります。
絶対配置要素
例を挙げてみましょう:
#relative { position: relative; width: 100px; height: 100px; background: green;}#absolute { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: blue;}#transform { background: red; width: 50px; height: 50px;}<div id="relative"> <div id="transform"> <div id="absolute"></div> </div></div>ログイン後にコピー
この時点で、絶対包含ブロックは相対パディング ボックスのエッジ ボックスです。したがって、絶対値の幅と高さは 100px になります。次に、次のルールを追加します:
#transform { transform: scale(1);}ログイン後にコピー
ログイン後にコピー
transform はローカルのスタッキング コンテキストを作成するため、absolute の包含ブロックは相対ではなくなり、この新しい包含ブロックに従って、新しい幅と高さは 50px になります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
