z-index 와 stacking context (natural stacking order)

wiz·2022년 5월 29일
0

요소 의 앞뒤로 보이는 순서 조정하는 속성

z-index 적용 규칙

기본 규칙

  • z-index 를 이용하기 위해서는 position: static 이 아니어야 한다
  • 먼저 각 Stacking Context (쌓임 맥락)의 앞뒤 순서를 생각한다
    • 아무리 z-index 가 높아도 속한 쌓임 맥락을 벗어날 수 없다
  • 다음으로 같은 쌓임 맥락 안에서의 순서를 생각한다

같은 쌓임 맥락 안에서의 순서

가장 아래에 보임 → 가장 위에 보임

  1. 쌓임 맥락의 뿌리(root) 요소
    • 다른 것들을 포함하는 요소
  2. static이 아니고, z-index 값이 음수인 요소(와 자식들).
  3. static 인 것들
  4. static이 아니고,  z-index:auto 혹은 z-index:0인 요소(와 그 자식들)
  5. static이 아니고,  z-index 값이 양수인 요소(와 그 자식들)

기타

Stacking Contexts 가 만들어지는 경우

  • 요소가 문서의 최상위 요소일 때 (즉, <html> 요소)
  • 요소가 position: static 이 아니면서 z-index: auto 가 아닐 때
    • 일부에선 position: fixed 이면 z-index: auto 여도 생긴다
  • 요소의 opacity 값이 1보다 작을 때
    • opacity 또는 transform같은 css 속성들을 설정하면 element가 새로운 stacking context에 배치된다.
    • position: static 이 아니면서 z-index: 0 가 된 것처럼 작동한다
      • position 이나 z-index 를 설정하지 않았어도
  • 일부 브라우저에서, position: fixed 일 때
    • 즉 z-index:auto 이여도 position:fixed 이면 쌓임 맥락이 생성된다
profile
wiz
성장 중인 프론트엔드 개발자
이전 포스트

JavaScript Module System 자바스크립트 모듈 시스템

0개의 댓글