CSS配置：相対的な影響z-インデックスのない積み重ね順

Question

私は説明が見つからない奇妙なCSSを見つけました。 position: absoluteを使用

、divは、別divB上方に引っ張られます。 divb（の場合は）は、子がposition: relativeである場合、その要素はのの上に表示されます。

var parent = document.querySelector('.parent') 
 

 
document.querySelector('button').addEventListener('click', function() { 
 
\t parent.classList.toggle('toggle-class') 
 
});

.parent { 
 
    background: grey; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.child-a { 
 
    background: orange; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.child-b { 
 
    background: green; 
 
    height: 100%; 
 
} 
 

 
.toggle-class .child-b span { 
 
    position: relative; 
 
}

<div class="parent"> 
 
    <div class="child-a"> 
 
    child a 
 
    </div> 
 
    <div class="child-b"> 
 
    <span>child b' child</span> 
 
    </div> 
 
</div> 
 

 
<button> 
 
toggle 
 
</button>

私の最初の反応は、コンテキストをスタック上に読み込むことだったが、ないz-indexが遊んでないので、これはおそらくポジショニングとは何かを持っています。それでも、私はこれがどのように可能であるか理解していません - なぜposition: relativeが適用されると、上記の要素が上に現れますか？

Answer 1

スタッキングコンテキストのためです。スタッキングコンテキストを構成する値はz-indexだけではないことに注意してください。位置付けされた要素も同様です。そのため、.parentは、位置がrelativeであるため、スタッキングコンテキストを作成します。トグルすると、.child-bスパンは.parentを基準にして配置されます。要素は（下から上に）次の順に積層されz-indexことなく積み重ねる場合

は

Answer 2

MDN Web Docsを見る

1. ルート要素
2. 子孫以外の背景との境界を配置されたブロック、HTMLの外観の順に表示
3. HTMLの外観順に配置された要素

だから何があなたのケースで起こるMDN

ソースは、祖父母（.parent）が配置要素があるので、切り替え子孫（子供が）、（位置付け要素とその親に変わるということです）。

ルール3に続いて、HTMLに表示される後者の要素が表示されるため、この動作は