CSS > CSS3_html/css_WEB-ITnose のカスケードコンテキストの概要-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS > CSS3_html/css_WEB-ITnose のカスケードコンテキストの概要

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

前書き: カスケードコンテキストに関して、著者はより本質的な原則を理解するために、より詳細な 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であってもカスケードコンテキストを作成してしまうバグがあります。

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、読者には中国語版を読まないように注意してください。中国語版はリアルタイムで更新されず、翻訳もあまり正確ではないためです
上記の要素が新しいスタッキングコンテキストを作成するとき、それらはスタッキングコンテキストのレベルも上げます要素自体がそこに配置されます。

不透明度が 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 になります。次に、次のルールを追加します: