z-index가 제대로 작동하지 않는 이유

최근 프로젝트를 하면서 아무리 z-index를 입력해도 (심지어 999를 넣어도) 원하는대로 화면위로 올라오지 않았다.
z-index보다 위에있는 element는 심지어 z-index가 없어서 더 환장할 노릇이었다.
그래서 그동안 한번도 고민해보지 않았던 z-index에 대해 찾아보았다.

정말 개발은 하면할수록 내가 모르는게 투성이라는걸 알아가는것 같다.
어쨌든 그렇게 알게된 z-index 작동 원리를 정리해보고자 한다.

 

1.  z-index 도 우선순위가 있다.

이번에 알게된 제일 충격적인 사실... z-index도 우선순위가 있다.

a. 부모요소의 z-index가 자식요소의 z-index보다 우선순위를 가진다.

다른말로 하면, 자식요소의 z-index가 아무리 높아도 부모요소의 z-index에 제한을 받는다.

<div class='parent1' style='zIndex: 1'>
  <div class='parent1__child1' style='zIndex: 3' />
  <div class='parent1__child2' style='zIndex: 2' />
</div>

<div class='parent2' style='zIndex:10'>
  <div class='parent2__child1' style='zIndex: 1' />
  <div class='parent2__child2' style='zIndex: 2' />
</div>

이런 코드가 있다면 parent1__child1은 z-index값이 3이지만, 부모요소인 parent1의 z-index가 1이기 때문에,
부모요소의 z-index가 10인 parent2__child1보다 아래쪽에 있게 된다.

parent1__child1과 parent1__child2를 비교할 경우, 부모요소가 동일하므로 자신이 가진 z-index 값으로만 비교할 수 있다.

모든 요소들이 겹쳐있다고 가정했을때 위에있는 요소들의 순위는
parent2__child2 - parent2__child1 - parent1__child1 - parent1__child2 이다.

즉 먼저 부모요소의 z-index 값 비교 를 한 후, 자식 요소의 z-index 값 비교를 하여 우선순위가 정해진다.

 

 

2.  z-index는 아니지만 z-index처럼 영향을 미치는 요소들이 있다.

a. 뒤에 나온 코드가 앞에나온 코드보다 위에 위치한다.

이건 너무 당연한 말이지만, 같은 위치에 있는 `red`와 `blue` div가 있다면 뒤에 적힌 `blue`가 `red` 위에 위치한다.

b. position의 값이 static이 아닐 경우, 같은 코드레벨에서 static인 요소보다 위에 위치한다.

blue가 red보다 뒤에 나왔지만 red의 position이 absolute이므로 blue보다 위에 위치하게된다.
만약 blue와 red의 position이 둘다 static이 아니라면, 뒤에 나온 요소가 위에 위치한다.