-
z-index: 9999로도 해결이 안되는 이유코드잇 2023. 12. 3. 14:09
z-index가 내맘대로 안될 때
먼저 z-index를 사용하기 위해선
position 속성을 부여해줘야 한다. (static 제외)
.red { position: relative; z-index: 1; }z-index: 9999로도 해결이 안 되는 이유
<div class="red"> <div class="green"></div> </div> <div class="blue"></div>.red { background-color: red; position: absolute; width: 100px; height: 100px; top: 0px; left: 0px; z-index: 1; } .green { background-color: green; position: absolute; width: 50px; height: 50px; top: 25px; left: 25px; z-index: 3; } .blue { background-color: blue; position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; z-index: 2; }z-index만 봤을 때는 green, blue, red 순으로 배치 될 것 같다.
하지만 실행 결과에서는 blue가 가장 앞에 배치된다. green의 z-index가 9999 값을 가지더라도 마찬가지다.
이렇게 된 이유는, z-index는 값만 비교하는게 아니라 쌓임 맥락(Stacking Context) 안에서 비교하기 때문이다.
쌓임 맥락
z-index를 묶어서 생각하는 범위라고 할 수 있다. 예를 들어 위 코드의 계층 구조는 다음과 같다.
.red의 자식에 .green이 있기 때문에 쌓임 맥락이 만들어진다.
쌓임 맥락으로 .red 밑에 자식들은 모두 z-index: 1로 묶어서 볼 수 있다. 그래서 항상 .blue 뒤쪽에 배치된다.
위에 코드를 해결하려면 해당 요소의 쌓임 맥락을 바깥으로 꺼내면 된다.
<div class="red"></div> <div class="green"></div> <div class="blue"></div>쌓임 맥락은 사실 조건이 굉장히 복잡하다. 조건을 모두 외우기 보다는 실용적으로 접근하자.
조건들은 MDN에서 가져왔다.
- 문서의 루트 요소. (<html>)
- position 이 absolute 또는 relative이고, [z-index]가 auto가 아닌 요소.
- position 이 fixed 또는 sticky인 요소.
- opacity 가 1보다 작은 요소.
- …
- …
z-index 값이 너무 많아지고 복잡해질 때
상위 요소들의 쌓임 맥락을 적절하게 만들어 주면 된다. 밑에 코드처럼 상위 요소들에 쌓임 맥락을 미리 만들어 주면 기존 배치들을 바꾸지 않아도 된다.
<main> 태그에 쌓임 맥락을 만들어 놓으면 <header> 태그는 무슨 일이 있어도 <main> 태그 안에 있는 것들 보다 앞쪽에 보이게 될 것이다.
<header> ...내비게이션 </header> <main> ...본문 내용 </main>header { position: sticky; top: 0; z-index: 1; } main { position: relative; z-index: 0; }'코드잇' 카테고리의 다른 글
git에서 branch merge, git flow (0) 2023.12.08 git 커맨드 (0) 2023.12.05 position - CSS (0) 2023.11.26 CSS Cascading (우선순위) (0) 2023.11.26 마진 상쇄 - CSS (0) 2023.11.22