Z- 색인은 동일한 그룹 내의 항목에만 영향을 줍니까?

Question

다른 영역에있는 HTML에 뭔가를 넣으려고했으나 높은 z- 인덱스가있어서 맨 위에 있어야합니다. 어떻게 작동합니까?

<div> 
    <div style="z-index: 7000"></div> 
</div> 
<div style = "z-index: 7050"></div> 

내가 그 Z- 인덱스가 DOM 트리의 형제 자매 만 relavent했다 생각했다 :

내 예는이 같은 것입니다.

여러분 모두 이것에 대해 어떻게 생각하십니까?

Answer 1

이 이미지는 멋지게 요약합니다.

당신은 크리스가 이미 지적했듯이, z-index 특성은 위치 요소에 적용하는 것이 중요하다 Z- 인덱스 속성은 스택 문맥 here

Answer 2

예/아니오 상위 요소가 상대 위치로 설정된 경우 동일한 그룹 내에서만 영향을줍니다. 그 시점에서 그 안에있는 모든 것은 그것을 기반으로합니다.

위의 HTML을 기반으로 볼 수 있습니다. z-index은 말하는 부분에서 DOM 흐름에서 요소가 분리되지 않으므로 말에 아무런 가치가 없습니다. 고정 또는 절대

예 : Z-인덱스 된 위치를 가질 요소이다

<div style="z-index:100;"></div> 

아무것도를하지 않는다

<div> 
<div style="z-index:100;"></div> 
</div> 

가

<div style="position:relative;width:100px;height:100px;"> 
    <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div> 
    <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div> 
</div> 

아무것도를하지 않는다 일을 수행하고 요소를 유지 상위 div 내에서

<div style="width:100px;height:100px;"> 
    <div style="z-index:100;position:absolute;top:0;left:0;background-color:#000;"></div> 
    <div style="z-index:200;position:absolute;top:25px;left:25px;background-color:#CCC;"></div> 
</div> 

어디 오히려 부모 요소보다, 자신을 배치하는 결정이 매체로 브라우저를 사용하는 Z- 인덱스로 된 div하지만 무언가를.

Answer 3

내에서 작동하는 방법에 대한 좋은 기사를 찾을 수 있습니다. The spec은 z-index 속성이 동일한 스태킹 컨텍스트 내의 요소 위치 지정을 정의한다고 말합니다. 모든 요소가 새로운 스태킹 컨텍스트를 생성하지는 않습니다! 따라서 z-index은 DOM 트리의 형제와 관련이있을뿐만 아니라 동일한 스태킹 컨텍스트의 모든 요소와 관련이 있습니다. The spec은 z-index 속성 에 대해 정수 대신 auto이있는 요소는이 새 스태킹 컨텍스트를 생성하지 않는다고 말합니다.