고정 위치 요소가 Z-인덱스가 더 높은 정 위치 요소 앞에 나타나는 이유는 무엇입니까?

z-index 문제 해결: 고정 위치 이해

z-index 설정에도 불구하고 때로는 고정 위치 요소를 만드는 것이 어려울 수 있습니다. 정적으로 배치된 것 뒤에 나타납니다. 일반적인 해결 방법은 정적 요소에서 절대 위치 지정을 사용하는 것입니다.

이 동작을 더 자세히 알아보려면 다음 예를 고려하세요.

<div>

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

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

알다시피 고정된 요소(z-인덱스 1)는 정적 요소(z-인덱스 10) 앞에 유지됩니다. 이는 기본적으로 정적 위치 지정 요소에 스택 컨텍스트가 없기 때문에 발생합니다. 즉, Z-인덱스의 영향을 받지 않습니다.

이 문제를 해결하려면 정적 요소에 대해 position:relative를 추가하여 정적 요소에 대한 스택 컨텍스트를 정의할 수 있습니다. . 이렇게 하면 z-index 속성이 예상대로 작동하는 새로운 z-index 레이어가 생성됩니다.

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

이제 고정 요소는 의도한 대로 정적 요소 뒤에 표시됩니다. 이 간단한 조정을 통해 적절한 Z-인덱스 동작이 보장되므로 요소의 레이어링을 효과적으로 제어할 수 있습니다.

위 내용은 고정 위치 요소가 Z-인덱스가 더 높은 정 위치 요소 앞에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!