프로젝트를 진행하다가 z-index 속성을 아무리 높게 줘도 다른 영역이 자꾸 위로 올라오는 문제를 만났다..
z-index가 안먹는 것 같아 삽질하다가 미래의 나는 또 삽질 하지 말라는 의미에서 정리해본다.
💡 z-index 와 position
z-index를 사용할 때 가장 중요한것은 position을 설정해줘야 한다는 것이다.
static (기본값)
요소가 문서의 정상적인 흐름에 따라 배치된다.
z-index가 적용되지 않는다.
relative
요소가 문서의 정상적인 흐름에 따라 배치되지만, 추가적인 top, right, bottom, left 속성을 사용하여 자신의 위치에서 이동할 수 있다.
z-index를 적용할 수 있다.
absolute
요소가 문서의 정상적인 흐름에서 제거되고, 가장 가까운 위치 지정 조상 요소(가장 가까운 relative, absolute, fixed, sticky 부모 요소)를 기준으로 배치된다.
z-index를 적용할 수 있다.
fixed
요소가 뷰포트를 기준으로 배치됩니다. 스크롤해도 요소는 제자리에 고정된다.
z-index를 적용할 수 있다.
sticky
요소가 스크롤 위치에 따라 relative와 fixed 사이에서 전환됩니다. 스크롤 범위를 벗어날 때까지는 relative처럼 작동하고, 벗어나면 fixed처럼 작동한다.
z-index를 적용할 수 있다.
즉, position을 static이 아닌 다른 속성을 지정해줘야 z-index가 먹힌다.
💡 부모의 z-index
해당 영역에 position을 주었는데도 불구하고 z-index가 안먹힌다면 부모의 z-index도 확인해보자.
아무리 해당 영역의 z-index가 높아도 부모의 z-index가 낮다면 자식의 z-index는 적용되지 않는다.
