고정 위치 지정이 Z-색인 순서를 깨뜨리는 이유는 무엇입니까?

고정 위치 지정의 Z-Index 역설 이해

HTML 요소를 처리할 때 z-index 속성은 스택 순서를 제어하여 페이지의 다른 요소 위 또는 아래에 나타나는 요소. 그러나 고정 및 정적으로 배치된 요소와 함께 z-index를 사용하면 예기치 않은 동작이 발생합니다.

다음 코드 조각을 고려하세요.

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

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

#over가 있는 요소가 표시될 것으로 예상됩니다. z-index 값이 더 높기 때문에 #under 뒤에 있습니다. 그러나 고정 요소(#under)는 낮은 우선순위를 무시하고 #over를 고집스럽게 오버레이합니다.

이는 고정 위치 지정이 일반 문서 흐름에서 요소를 제거하기 때문입니다. 뷰포트를 기준으로 요소를 배치하여 기본적으로 상단에 별도의 레이어를 생성합니다. 결과적으로 고정 요소의 z-index는 고정되지 않은 요소의 z-index와 상호 작용하지 않습니다.

이 문제를 해결하고 #over가 #under 뒤에 표시되도록 하려면 position:relative를 추가하세요. ; to #over:

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

이 작은 조정으로 #over 내에 새로운 로컬 스태킹 컨텍스트가 설정되어 z-index가 해당 컨텍스트 내의 요소에 영향을 미칠 수 있습니다. 이제 #under는 의도한 스택 순서를 존중하여 #over 뒤에 올바르게 표시됩니다.

고정 위치 지정은 페이지에서 절대 위치 지정을 생성하는 강력한 도구이지만 Z-색인과 상호 작용할 때 제한이 따릅니다. 특정 시나리오에서는. position:relative 트릭을 적용하면 스택 순서에 대한 제어권을 다시 얻고 원하는 레이어링 효과를 얻을 수 있습니다.

위 내용은 고정 위치 지정이 Z-색인 순서를 깨뜨리는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!