[CSS] 요소의 쌓임

👀 요소의 쌓임

프로젝트 archive를 만들다가 특정 요소를 다른 요소 위에 쌓기위해 알아낸 사실에 대해 정리한다.

✔ z-index가 없는 경우

• position 속성이 없는 경우: 가장 아래에 쌓인다
• position 속성이 있는 경우: 순서대로 쌓인다

✔ z-index가 있는 경우

• 기본값은 0
• z-index 값이 높을수록 앞에 쌓인다
• 음수도 적용 가능

*position 속성이 없는 경우 z-index값이 높더라도 position 속성이 있는 경우보다 아래에 쌓인다

✔ 부모자식 관계

• 자식요소는 자신의 부모요소를 이기는 다른 요소를 이길 수 없다
  예) A, B가 동등하고 C가 B의 자식요소라고 가정하고, 각각의 z-index가 10, 1, 100이라고 가정했을때 C는 A앞에 놓일 수 없다.

✔ 정리

정리하자면

• 뿌리 요소
• position 값이 있고, z-index값이 음수인 요소
• position 값이 없는 요소
• position 값이 있고 z-index값이 auto인 요소
• position 값이 있고 z-index값이 양수인 요소

👍 참고 사이트

• CSS - 요소 쌓임 순서
• z-index에 관해 아무도 말해 주지 않은 것