css의 z-index를 처음 사용했을 때에는 단순한 코드만으로 연습했기 때문에 상당히 심플하고 쉬웠다.
우선순위로 보여주고자 하는 element에 숫자를 높게 지정해주면 되기 때문.
하지만, 하나의 프로젝트를 만들면서 z-index가 적용이 안되는 문제들이 발생했다.
처음에는 이유도 모르고 더 높은 인덱스만을 적용했고, 심지어 9999까지 적용해도 원하는대로 보여지지 않는 지경까지 이르게 되었다.
이번 포스팅에서는 z-index가 적용되지 않는 이유에 대해 알아보려고 한다.
✔️ z-index를 사용하기 위해 가장 중요한 것은, position 속성을 부여해줘야 한다는 것이다.
.content {
z-index: 1; // 이렇게만 사용하지 않고
position: relative; // static을 제외한 position 속성을 같이 사용해야한다.
}✔️ 만약 position을 작성해도 동작하지 않는다면, 부모의 z-index를 체크해봐야 한다.
<section class="wrapper">
<div class="modal">팝업창</div>
</section>
<nav class="nav"></nav>.wrapper {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 10;
}
.nav {
position: relative;
z-index: 3;
}modal의 z-index가 10이여도, 부모인 wrapper의 z-index가 1로 형제인 nav보다 값이 낮기 때문에 nav가 modal의 위에 배치될 수 밖에 없다.
같은 레벨의 부모의 z-index 값이 낮으면 자식의 값은 아무리 높게 작성해도 적용되지 않는다.
부모는 부모끼리, 자식은 자식끼리 z-index를 비교한다.
이럴 때에는,
.wrapper {
position: relative;
z-index: 5;
}
.nav {
position: relative;
z-index: 3;
}
- 부모 요소에 더 높은 z-index 값을 주거나
<section class="wrapper"></section>
<div class="modal">팝업창</div>
<nav class="nav"></nav>
- 팝업창을 부모와 동등하게 밖으로 빼주면 문제를 해결할 수 있다.
✔️ 마지막으로, 이 외에도 z-index에 영향을 주는 것들이 있다.
opacity, transform은 z-index나 position을 사용하지 않아도 상단으로 끌어 올려준다.
이상으로 z-index를 작성하면서 가장 많이 접할 수 있는 오류에 대해 알아보았다.
