z-index

1. index란?

우선 순위를 주는 속성이며, 웹페이지에서 요소들이 서로 겹칠 때 어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 보일지 정할 수 있다. 

• z-index는 단독으로 사용 불가능
• flex-items는 단독으로 사용 가능
• position로 가능하다. -> z-index를 발동시키는 조건은 position 초기값인 static만 아니면 된다.
  • absolute, relative, fixed, sticky로 설정된 요소에 적용 가능하다.
• px가 아닌 숫자로 입력해야하며, 숫자가 크면 클수록 우선순위로 둔다.
• z-index는 음수 값을 가질수도 있다. 음수 값이 지정된 요소는 양수 값이 있는 요소들보다 뒤에 위치하게 된다. 예를 들어 z-index: 1은 대부분의 다른 요소들보다 뒤쪽에 위치하게 만든다.
  • 즉, 스테킹 컨텍스트 최상위 요소. :root로 간다.
  • 만약 이게 아니라 부모 요소 뒤에 위치하고 싶다면, 부모를 새로운 스테킹 컨텍스트로 지정을 해줘야 한다.
  • z-index:0 은 새로운 스테킹 컨텍스트로 바꾸고자 하는 요소에 지정을 해준다.
  • z-index: auto인 값만 안주면 된다. 
  • z-index는 형제요소에서만 비교가 되며, 다른 밖 요소랑은 비교할 수 없다.

z-index의 경우는 숫자가 무조건 크다고 전체 페이지에서 먼저 나오는 것이 아니다. 

부모에 스테킹 컨텍스트가 있는 지 파악하며, 상위인지, 최상위인지 확인 해야한다.

 

1. 루트에만 스태킹 컨텍스트가 있는 경우 

 

z-index: 9999가 z-index: 1보다 위에 있다.

 

2. 루트위에 부모 스태킹 컨텍스트가 있을 때

z-index: 9999는 z-index: 0 라는 스태킹 컨텍스트 안에서만 작용을 한다.

z-index: 9999의 부모인 z-index: 0는 부모 형제요소인 z-index: 1보다 작은 숫자이므로 z-index: 9999가 z-index: 1보다 아래에 있다.

즉, z-index: 9999는 자신의 동네(z-index: 0)에서는 1위이지만

z-index:9999이 글로벌(root)에서는 z-index: 1에겐 밀린다.

 

부모 요소 z-index: 0(auto가 아닌 값)에 의해 자식 요소를 지역적으로 만든다.