z-index의 css 속성은 개발자들이 애용하는 속성이라고 생각합니다. 그러나, 많이 사용되는 개념이지만 정확하게 알고 있는 개발자는 생각보다 적은 것 같아서 해당 개념에 대해서 서술하려고 합니다.
z-index 어떤 것일까?
z-index CSS 속성은 위치 지정 요소와 해당 하위 항목 또는 플렉스 항목의 z 순서(높낮이)를 설정합니다. 더 큰 z-index 가 있는 겹치는 요소는 더 작은 z-인덱스 요소보다 높게 위치합니다.
z-index 가 100과 99가 있으면 정확하게 100 레벨에, 99 레벨에 위치할까요? 정확하게는 상대적인 개념입니다. z-index에는 stacking-context(쌓임 맥락)이 존재 합니다. 쌓임 맥락에 대해서 알아봅시다.
Stacking Context
Stacking Context(쌓임 맥락)은 가상의 z축을 사용한 HTML 요소의 3차원 개념화입니다.
쌓임 맥락은 다음과 같은 요소가 생성합니다.
- 문서의 루트 요소. (<html>)
- position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소.
- position이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
- 플렉스(flexbox (en-US)) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- 그리드(grid) 컨테이너의 자식 중 z-index가 auto가 아닌 요소.
- opacity가 1보다 작은 요소. (불투명도 명세 참고)
- mix-blend-mode가 normal이 아닌 요소.
- 다음 속성 중 하나라도 none이 아닌 값을 가진 요소.
- isolation이 isolate인 요소.
- -webkit-overflow-scrolling이 touch인 요소.
- will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
- contain이 layout, paint, 또는 둘 중 하나를 포함하는 값(strict, content 등)인 요소.
쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 z-index 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.
요약하면,
- 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
- 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
- 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.
따라서, z-index 가 잘 동작하지 않을 때는 서로 충돌되는 컴포넌트의 z-index 가 같은 컴포넌트인지 확인해야 합니다. 만약에 그런 부분이 아니라면, 서로 형제 레벨이 되는 컴포넌트의 z-index 를 우선적으로 바꾸어야 합니다.
Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
z-index - CSS: Cascading Style Sheets | MDN
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
developer.mozilla.org
'Web > techTalk' 카테고리의 다른 글
| Virtual DOM 을 왜 사용하나요? (Feat. React reconciliation) (0) | 2022.07.05 |
|---|---|
| [React] Atomic, Container Presenter 어떤 디자인패턴을 써야할까? (0) | 2022.03.18 |
| [Test Code] Unit Test, Integration Test, Acceptance Test (0) | 2022.03.06 |
| 쿠키,세션 어떤 것이 로그인에 적합할까? (0) | 2022.01.31 |