CSS - 요소 쌓임 순서 (position, z-index)

요소 쌓임 순서 (Stack order)

요소가 쌓여 있는 순서를 통해 어떤 요소가 더 위에 쌓이는지를 알아보자

1. static을 제외한 position속성의 값이 있는 경우 제일 위에 쌓인다.
2. position속성이 모두 존재할 경우 z-index속성의 값으로 위에 쌓인다. (큰 수가 더 위로간다.)
3. position속성이 존재하고 z-index속성의 수가 같다면, html에서 마지막에 작성한 코드가 위에 쌓인다.

position > z-index > 마지막 작성된 코드순으로 요소가 쌓인다.

See the Pen wvJYMGB by Hyemi Lee (@hhyemi) on CodePen.

box1과 box2 비교

box1에 position속성이 있기 때문에 box1이 box2보다 위에 쌓인다.

box3과 box4 비교

box3와 box4 모두 position속성이 있기 때문에 z-index의 숫자가 높은 box3이 box4보다위에 쌓인다.

box4과 box4 비교

box4와 box5 모두 position속성이 있고 z-index의 숫자가 같기 때문에 마지막에 작성된 box5이 box4보다위에 쌓인다.