z-index 적용 안된다면?

일단 z-index는 기본값이 auto이다. 

숫자가 작아지면 화면에서부터 멀어지고, 커지면 가까워진다. 

 

 z-index를 통해 보다 늦게, 빨리 랜더링 시키면서 요소의 수직 위치를 자유롭게 바꿀 수 있다. 

 

1. z-index는 부모요소의 위계에서 벗어날 수 없다.

 

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

z-index값만 놓고 보자면 chlid - solo - parents 순으로 보여야 할 것이다.
하지만 같은 위계상에 있는 solo와 parents 를 놓고 비교해본다면,
parent가 10, solo가 200으로 쨉도 안되게 졌기때문에..
solo가 맨 위에 보인다.

 

그러니까 z-index를 통해 수직 위치를 정할 때는 

같은 위계에 있는 요소끼리 비교하여 위치를 정하게된다! 

 

2. z-index를 사용하려면 position absolute / relative / fixed가 적용 되어있어야 한다. 
+다른 위계에 있는 요소끼리 z-index가 비교되는 경우가 있다.

 

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

 

이번엔 같은 위계에 있는 solo와 parents를 비교했을 때 z-index는 parents가 더 높지만 
position속성이 적용되지 않았기때문에 parents가 가장 먼저 랜더링된다.

 

그렇다면 그 다음은?

자식요소는 부모요소의 위계에 갇힌다고 생각한다면 parents-chlid-solo 순으로 랜더링 된다고 생각할 수 있다.

 

하지만 그 다음단계는 다음과 같다.

position이 적용된 solo와 child를 비교한다. 
solo가 120, child가 160이므로 child가 가장 늦게 랜더링되어 앞에 보인다.

 

즉, parents-solo-child 순으로 랜더링된다.

 

3. z-index의 초기값은 auto이다.

 

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

2번 예시의 경우, parents요소에 position을 주지 않아 가장 먼저 랜더링 되었다.

이번엔 positionr요소를 주고, z-index값은 따로 주지 않았다.

이 경우엔 z-index:auto로 읽혀진다.

그리고 주변 요소들끼리만 z-index가 비교된다.

 

요소가 쌓이는 순서

1. position값이 있고 z-index가 음수
2. position값이 없는 요소
3. position값이 있고 z-index:auto
4. position값이 있고 z-index가 양수

 

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

 

z-index가 없다면 자연스럽게 parents -> child 순으로 랜더링 될 것이다.

하지만 위와 같은 경우라면 요소의 쌓임 순서에 따라 child가 z-index 음수의 값을 가져 가장 먼저 랜더링된다!