[CSS] z-index

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

z-index

CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

z-index 속성은 position 값이 static이 아닌 박스 요소(즉, 위치 지정 박스 요소)에 적용되며, 다음 두가지 항목을 지정합니다.

• 현재 쌓임 맥락(stacking context)에서 자신의 위치
• 자신만의 쌓임 맥락 생성 여부

 

값

auto : 박스 요소가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모와 동일합니다.

<integer> : 현재 쌓임 맥락에서의 위치를 해당 값으로 지정합니다. 또한 자신만의 쌓임 맥락을 생성하고, 값을 0으로 지정합니다. 이로 인해 자손의 z-index를 자신 밖의 요소들의 z-index와 비교하지 않습니다.

 

적용 대상

poistion 값이 static이 아닌 박스 요소.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/z-index

z-index

https://developer.mozilla.org/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context

쌓임 맥락