なぜdiv :: beforeはchildren要素の上に表示されますか？

Question

これは私には意味がありません。すべきではない：前にスパンの前にレンダリングされる？子要素に相対的な位置を追加すると動作します。

これはスタッキングのコンテキストと関係する可能性がありますが、正確にはわかりません。

https://www.w3.org/TR/CSS21/visuren.html#layers

それは位置の子孫だから、この場合のスパンは＃6の前に::それは非位置付けていますので、＃3に該当すると？

div { position:relative; } 
 

 
div:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
/* Adding this works: */ 
 
/* span { position: relative; } */

<div> 
 
    <span>Test</span> 
 
</div>

Answer 1

アイテムにpositionが設定されていない場合は、レイアウトがかなり低く設定されています。要素をabsoluteのように配置する場合は、すべての兄弟要素にpositionを与える必要があります。この例では::beforeとspanは兄弟であり、::before以来位置を持ち、spanが::beforeが

:pseudo CSSクラスの仕組み

Answer 2

あなたは、その位置を指定したので、それは別のフローレベルにあるように、コンテンツになりabsoluteです。 z-indexを指定することはできますが、それでも必ずしも機能しない場合もあります。たとえば、absolute/relativeの要素がある場合は、static以上の任意の数のz-インデックスがあります。

Answer 3

要素が要素の前と内を追加されますされ、より「重要」ではありません。私は:beforeがあるので、非常にあなたが達成することが、あなたの疑問を説明するために必要なものを、あなたのdiv要素にposition:relativeを追加した後、現在の結果を生産している理由はありませんよ

<div> 
    :before 
    <span>Test</span> 
</div> 

：そうのような

position:absoluteで設定します。これにより、：：before要素を現在のhtml階層から取り出し、div { position:relative; }を設定した最も近い要素に相対的な位置に配置します。

前が階層から引き出されているので、<span>は利用可能な空き領域（aka overlay by：before）を埋めます。