CSS スタッキングのあまり知られていない落とし穴 Context_html/css_WEB-ITnose

通常、私たちが CSS を学習/理解するとき、スタッキングコンテキストのルールに直接触れたり理解したりすることはありません。学習が初めての場合でも、z-index に触れて制御できることを知るだけです。しかし、私はこの 2 日間で、z-index の泥沼に足を踏み入れ、z-index によって引き起こされる一連のコンテキストの積み重ねの落とし穴を理解しました。索引。

z-index とは

W3C ドキュメントでの z-index の説明は次のとおりです:

z-index 属性を使用すると、コンテンツをレンダリングするときにオブジェクトの階層化の順序を調整できます。
これは、CSS スタイル ルールを意味します。通常のレンダリング レイヤー (レイヤー 0) に加えて、レイヤー上にボックスを配置できます。各レイヤーの Z 位置は、レンダリングの積み重ね順序を表す整数として表されます。

つまりz-index を使用して、レイヤー 0 上の「配置された」要素の順序を制御します。値が大きいほど、要素はユーザーに近くなります。 #ここで、レイヤー 0 は HTML 要素であるルート ノードを指します

スタッキング コンテキストとは何ですか

前に述べたように、z-index の役割を知っているだけでは、実際の多くの奇妙な CSS z-index 配置パフォーマンスを説明できないことは明らかです。ルート ノードのレイヤー 0 に代わって、CSS で同様の構造を構築できます。z-index スタック スペース特性を提供し、サブ要素のレンダリング順序に影響を与えるこの構造は、スタッキング コンテキストと呼ばれます。

要素をスタッキング コンテキストにできる CSS プロパティ

次のルールを満たす要素はスタッキング コンテキスト構造を構築します:

ルート要素 (html)
「位置決め」要素 (位置: 絶対または相対) auto
• 以外のz-index値を指定する要素
• flex item auto
以外のz-index値を指定する要素
• 不透明度が1未満の要素
• none以外のtransform値を指定する要素
• mix-を指定するBlend- 通常以外のモード値を持つ要素
• none 以外の指定されたフィルター値を持つ要素
• isolate として指定された分離値を持つ要素
• == 特殊なケースのモバイル Webkit および chrome 22+、位置を持つ要素: 固定 = =
• In will-change 属性が上記リストの任意の属性の値を指定する要素
• touch の -webkit-overflow-scrolling 値を指定する要素

*最初の 2 つに加えて、スタッキングコンテキストの作成条件を満たす条件が多く、不透明度<1などのバグの原因も多数

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

スタッキングコンテキストはネスト可能

各スタッキングコンテキストは兄弟要素から完全に独立しており、その内部ルールは外部には影響しません

Every 各スタッキング コンテキスト要素は、スタッキング ルールを適用するために親スタッキング コンテキストによって要素として扱われます

スタッキング コンテキスト内の要素の場合、この要素はスタッキング コンテキストを形成せず、その z-index 値は auto です (ただし、実際には、この要素がスタッキング コンテキストを形成しない場合、z-index 属性はこの要素のパフォーマンスにとってまったく意味がありません。この要素とその親スタッキング コンテキストが統合されていることを理解してください)。

配置された要素の Z インデックス値 (位置: 絶対または相対) を指定することにより、親スタッキング コンテキスト内の要素の Z 軸の「相対オフセット」を変更します。ここでの「相対オフセット」とは、親のスタッキング コンテキストに基づいて、他の兄弟要素に対するユーザーからの距離の順序を指します。

スタッキング コンテキストを形成する要素の z-index 属性は内部要素に影響を与えないため、その子要素は (親スタッキング コンテキスト) を z-index の相対参照点として使用します。つまり、z-index: autoこれらの子要素のスタッキング コンテキストの兄弟要素は、次の距離の順序で画面に表示されます:

98d8b34b5a9e6404f35452ef642c818a

*スタッキング コンテキスト内の要素は、親スタッキング コンテキストよりも遠くに存在しないことに注意してください

特別非「位置決め」要素のルール コンテキストの積み重ね

最初の段落 非常にわかりにくいコード (埋め込みスクリプトをサポートしていないのは少し面倒です):

CodePen の abruzzi (@abruzzi) によるペン yNJRKX を参照してください。

http://codepen.io/abruzzi/pen/yNJRKX

上記のように、ここで box3 と box5 が作成されます不透明度: 0.99 のスタッキング コンテキストですが、W3C ドキュメントを見ると、スタッキング コンテキスト要素がデフォルトで非スタッキング コンテキスト要素の上に配置されるように定義するルールはありません。 box5 の z-index 属性を負の値に設定しましたが、box5 はまだ box6 の上にあります。position:relative & z-index:-1 を使用して box7 のスタッキング コンテキストを作成しましたが、パフォーマンスは正常です。 -index: auto 自体はスタッキング コンテキストを形成できないため、「スタッキング」などというものはまったくありません。コンテキスト要素のデフォルトは、非スタッキング コンテキスト要素の上で定義された意味になります)

W3C ドキュメントの隅に、理由を見つけることができます:

不透明度が 1 未満の要素が配置されていない場合、実装は、親のスタック コンテキスト内で、「z-index: 0」で配置された要素である場合に使用されるのと同じスタック順序で、作成するレイヤーをペイントする必要があります。 ' と 'opacity: 1'。

つまり、要素が「position」(位置: 絶対または相対) によるスタッキング コンテキストを実装していない場合、z-index: 0 (auto よりも高い) で配置されます。したがって、「位置決め」されていない要素の z-index を変更することは無効です。

このドキュメントでは、不透明度から 1 を引いたスタッキング コンテキストは z-index: 0 と見なされるとのみ言及されていますが、テストを通じて、他の非「位置決め」メソッドによって作成されたスタッキング コンテキストが不透明度と同じパフォーマンスを持つことがわかります。 1未満。

上記は、CSS スタッキング コンテキストにおける多くの奇妙な現象の理由を私がまとめたものです。

*注: 以下の内容はタイトルとは関係なく、作者のアイデアの延長に過ぎません

GraphicLayerとは

ブラウザがドキュメントを解析してレンダリングする際、内部処理が直接公開されるわけではありません私たちにとって、非常に重要な構造はレイヤーです。これらの公開されていないステップでは、RenderLayer は DOM サブツリー構造全体をレンダリングする役割を果たし、GraphicLayer は、担当するサブツリーをテクスチャとして GPU にアップロードします (これは、メモリ間で移動されるビットマップとして理解できます)。高速な描画を実現し、これらの属性によってもたらされるアニメーション効果を大幅に最適化できます。

不透明度を含め、スタッキング コンテキストを生成できるこれらの属性と特殊な GraphicLayers を作成する属性 (不透明度、フィルター、transfrom3d など) は非常に似ていますが、一部の属性 (2d トランスフロムなど) は一致しないと常に感じています。 2つは原理的には似ていますが、能力には限界があるため、穴を残さなければなりません。

ビューポート外の位置設定のバグを修正しました

コンテンツのスタックとは関係ありませんが、同様の位置設定に危険なバグがあります。次のコードの .inner の位置に注意してください:

abruzzi によるペン VLKeZP を参照してください。 (@abruzzi) CodePen .

http://codepen.io/abruzzi/ pen/VLKeZP

For transfrom値がnon-noneである要素が宣言され、その子要素にposition:fixedが存在する場合、宣言されたtransfromの最も近い祖先に基づいて配置されます。値が非なしの場合、ローカル座標系が定義され、位置がこれに基づいて固定されます。座標系はレイアウトを計算します。

このバグはまだ解決されていません。公式の推奨事項は、transform 要素の下での固定位置を避けることです。

by Abruzzi のブログ