[CSS] z-index 에 대해서

z-index 의 특징

• z-index 값이 클 수록 위로 올라온다.
  ex) A 의 z-index 는 0, B 의 z-index는 1 일 경우

• z-index 값이 같을 경우 나중에 배치된 레이어가 위로 올라온다.
  ex) A 와 B 의 z-index 모두 0 인데, html B 가 더 나중에 배치된 경우

• 태그 깊이가 같은 것 끼리만 비교가 된다.
  ex) A 는 z-index가 2, B 는 z-index 1, C 는 z-index 3 일 때 A > C > B 순으로 나타난다.

<div class="A">A</div>
<div class="B">
  B
  <div class="C">C</div>
</div>

 

   → A 와 B 중 A z-index 값이 더 크므로 A가 B 보다 위로 위치한다.
   → B 와 C 중 C z-index 값이 더 크므로 C 가 B 보다 위로 위치한다.
   즉, 부모 영향을 받으니 아무리 z-index 값이 크더라도 다른 요소들 보다 아래에 위치할 수 있음을 유의할 것

 

• z-index 값의 기본 값 (선언하지 않은 값) 은 0 이 아니라 auto 이다. 이말은 즉,
  • 현재 쌓임 맥락에서의 자신의 위치 : 3번 예시로 설명 됨
  • 자신만의 쌓임 맥락 생성 여부
    • 이 말은 z-index: auto로 지정하거나 z-index를 설정하지 않은 경우에는 쌓임에 대한 정의가 아예 아무것도 없다는 의미. (z-index: 0 은 쌓임 맥락은 있지만 값이 0 일뿐)
      ex) 3 예시에서 B 의 z-index 을 아예 없앴을 경우 C > A > B 순으로 나타난다.
     

                   → B 에 z-index 가 있었을 때는, A와 B를 비교했지만 (형제끼리 비교)
                   B 의 z-index 가 auto 이면, B의 자식인 C 가 비교할 대상으로 선정된다.
                   따라서, C(z-index: 3) 가 A(z-index: 2) 보다 더 위에 위치하게 된다.

• 즉!
  • z-index 는 기본적으로 형제 끼리 비교가 우선이다.
  • 하지만 형제의 z-index 값이 auto 이면 형제의 자식도 확인하여 비교한다.

다른 디자인 시스템 Use Case 정리

• vuetify
  • dialog: 202
  • snackbar: 1000
  • tooltip: 8
• meterial - zindex
• ant - zindex 를 props 로 받음
  • popover: 1030
  • tooltip: 1070
  • popconfirm: 1060
  • modal: 1000
  • notification: 1050
  • drawer: 1000
• bootstrap - zindex
  • modal: 1055
  • popover: 1070
  • toast: 1090
  • tooltip: 1080
• chakra - zindex
• forma - zindex
• salesforce - zindex
• nord - zindex
• stackoverflow - zindex
• shoelace - zindex

vuetify					202	202	1000	8
merterial	1000			1050	1200	1300	1400	1500
ant					1000	1000	1050	1070
bootstrap		1000	1020	1030		1070	1090	1080
charkra		1000	1100			1400	1700	1800
shoelace		900			700	800		1000
nord	400		300			900	800	700
stackoverflow		1000				9000		3000
forma		1000				100		1000