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)는 위치 요소이기 때문에 전환 자손 (아이가), (A 위치 요소 등 상위로 변신한다는 것입니다).

규칙 # 3에 따라 HTML에 나타나는 후자 요소가 표시되므로이 동작은