z-index가 고정 위치 요소에 영향을 주지 않는 이유는 무엇입니까?

z-index의 영향을 받지 않는 고정 위치 요소

CSS에서 z-index 속성은 요소의 스택 순서를 제어합니다. 페이지에서는 값이 높을수록 요소가 맨 앞으로 이동됩니다. 그러나 때로는 고정 위치 요소가 Z-인덱스 변경에 영향을 받지 않는 것처럼 보입니다.

이 동작은 고정 요소의 기본 정적 위치 지정으로 인해 발생합니다. 고정 위치 지정이 있는 요소가 기본 위치 지정이 있는 다른 요소 내에 배치되면 해당 요소 내에 쌓임 컨텍스트가 생성됩니다. 이 컨텍스트 내에서 고정 요소는 Z 인덱스에 상관없이 다른 요소 위에 배치됩니다.

이 문제를 해결하려면 상위 요소에 상대 위치 지정을 추가할 수 있습니다. 이렇게 하면 상위 요소 내에 새로운 스택 컨텍스트가 설정되어 고정 요소의 Z-색인이 적용될 수 있습니다.

예:

다음 HTML 및 CSS를 고려하세요.

<div>
<pre class="brush:php;toolbar:false">#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

이 경우 #under 요소는 #over 요소 위에 유지됩니다. 후자가 더 높은 Z-색인을 갖습니다. 이 문제를 해결하려면 #over 요소에 상대 위치 지정을 추가하세요.

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

이제 #under 요소의 z-index가 예상대로 작동하여 #over 요소 뒤에 배치됩니다.