CSS: z-index

z-index

위치지정요소와 자손이나 하위플렉스 아이템의 z축 순서를 지정함.
(단 position:static 이 아닌 fixed, absolute, relative, sticky에서만)

숫자가 클수록 맨 윗쪽에 쌓임
(auto도 값으로 줄 수 있지만 z-index 안쓸때와 같은 결과가 나옴.
위에서 아래로 가는 요소가 순차적으로 쌓임)

사용가능한 상황

z-index는 형제요소에서만 사용 가능.
(조상부모 사이에서는 사용 안됨)

z-index를 사용하지 않았을때 요소 순서

-position 속성이 static이 아닌 요소 > static인 요소
-둘 다 position 속성이 static인 요소는 나중에 나오는 요소가 위로 올라옴
-position 속성이 relative나 absolute, fixed, sticky인 요소간에는 나중에 나오는 요소가 먼저 나오는 요소 위로 올라옴
(즉 두번째, 세번째 상황에서는 먼저나오는 요소가 밑으로, 나중에나오는 요소가 위로 순차적으로 쌓임)

z-index를 조상요소와 중복으로 사용한다면?

위 같은 상황이 벌어진다면,
우리가 알고있는 상식으로는 z-index가 100인 one이 two보다 위로 올라와야 맞지만 first를 싸고 있는 wrapper의 z-index가 1이기 때문에 two의 밑으로 내려간것