3

MDN - z-index なしのスタッキングでは、ページ内の要素に z-index がない場合、要素は次の順序でスタックされます。

  1. ルート要素の背景と境界線
  2. 通常フローの子孫ブロック、出現順 (HTML)
  3. 子孫に配置された要素、出現順 (HTML)

しかし、不透明度が 1 未満の要素が含まれている場合は、そうではないようです。

http://jsfiddle.net/pbQfY/2/

実際の順序は次のとおりであると想定しても安全ですか?

  1. ルート要素の背景と境界線
  2. 通常フローの子孫ブロック、出現順 (HTML)
  3. 配置された子孫要素とスタック コンテキストを作成する子孫要素 (HTML での出現順)
4

1 に答える 1

4

その MDN の記事は、実際のスタック コンテキストの説明の基本的なバージョンにすぎないように見えます。これは、ビジュアル フォーマッティング モジュールでも触れられています。ただし、この特定の落とし穴は、CSS カラー モジュール(強調鉱山) からのものです。

不透明度が 1 未満の要素は単一のオフスクリーン画像から合成されるため、要素の外側にあるコンテンツは、要素の内側にあるコンテンツ間で z オーダーでレイヤー化できません。同じ理由で、実装は不透明度が 1 未満の要素に対して新しいスタッキング コンテキストを作成する必要があります。 'z-index: 0' および 'opacity: 1' で配置された要素である場合に使用されるスタック順序。不透明度が 1 未満の要素が配置されている場合、[CSS21] で説明されているように「z-index」プロパティが適用されます。ただし、新しいスタッキング コンテキストが常に作成されるため、「auto」は「0」として扱われます。スタック コンテキストの詳細については、[CSS21] のセクション 9.9 および付録 E を参照してください。SVG には独自のレンダリング モデルがあるため ([SVG11]、第 3 章)、この段落の規則は SVG 要素には適用されません。

于 2012-07-30T20:54:58.080 に答える