14

静的に配置されている場合、::before 疑似要素は子のコンテンツの前 (z-index) にスタックしますが、子の背景の後にスタックします。なぜ、またはどのようにこれが起こっているのか、またはこれがすべての主要なブラウザにある問題なのか、誰か説明できますか?

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

http://jsfiddle.net/funkyscript/ALrgf/

4

1 に答える 1

31

div2 つの疑似要素と 要素を含むのコンテンツは、p( に対してdiv) 同じスタッキング コンテキストに参加します。これは、お気づきのように、3 つすべてが静的に配置されているためです。つまり、まったく配置されていません。(はい、これらの要素はフロー中に z 軸に沿ってスタックしますz-index。配置されていないため、を使用してスタック レベルを操作することはできません。)

これは、さまざまな部分が描かれた順序の要約1です。質問に関連する太字の強調は次のとおりです。

各ボックスは、1 つのスタッキング コンテキストに属します。特定のスタック コンテキスト内に配置された各ボックスには、整数のスタック レベルがあります。これは、同じスタック コンテキスト内の他のスタック レベルに対する z 軸上の位置です。スタック レベルが大きいボックスは、常にスタック レベルが小さいボックスの前に配置されます。ボックスのスタック レベルがマイナスになる場合があります。スタック コンテキストでスタック レベルが同じボックスは、ドキュメント ツリーの順序に従って、後ろから前にスタックされます。

各スタッキング コンテキスト内で、次のレイヤーが後ろから前に描画されます。

  1. スタッキング コンテキストを形成する要素の背景と境界線。
  2. 負のスタック レベルを持つ子スタック コンテキスト (最も負の値が最初)。
  3. インフロー、非インライン レベル、非配置の子孫。
  4. 配置されていないフロート。
  5. インライン テーブルとインライン ブロックを含む、インフロー、インライン レベル、位置付けされていない子孫。
  6. スタック レベル 0 の子スタック コンテキストと、スタック レベル 0 の配置された子孫。
  7. 正のスタック レベルを持つ子スタック コンテキスト (最初に最小の正)。

div::beforeは のコンテンツの前に挿入され、divその後にdiv::after挿入されるため、静的な位置にインラインで表示される場合、ブロック要素を挟んでいる場合でも、自然にこの規則に従います (順序付けでは、ブロック ボックスとインライン ボックスの両方が考慮されます)。 .

明らかな理由から、通常は背景が最初にペイントされ、その上にコンテンツが重ねられることに注意してください。

  1. このp要素は、ブロック レベルの要素として、最初に描画される背景を持っています (#3)。

  2. 次に、インライン レベルの疑似要素が、背景の上に背景を重ねて描画されpます (#5)。書式設定モデルでは、それらはp要素の兄弟であるため、それらはすべて、 のスタック コンテキストではdivなく、のスタック コンテキストに参加しpます。

  3. div::before疑似要素 (コンテンツと背景の両方) は、ビジュアル ツリーで の前にあるため、テキストの後ろに表示さpれます。p

  4. div::after疑似要素 (コンテンツと背景の両方) は、ビジュアル ツリーで の後に来るため、テキストの前に表示されますp。p

私のコメントに示されているように、疑似要素をブロックとして表示すると、背景は要素div::beforeの背後に隠れpますが、テキストは隠れません。代わりに、 のテキストは要素div::beforeの背景とテキストの間に配置されますp。div::afterまた、 の背景が の背景の前にp描画され、コンテンツが最前面に描画されることにも注意してください。繰り返しますが、これは、上記のルールに関連して、コンテンツの前または後ろに描かれる背景に関係しています。

1 より詳細な説明は、仕様の付録 Eにあります。

于 2012-06-18T17:53:19.230 に答える