고정 위치 지정 시 Z-Index가 예상대로 작동하지 않는 이유는 무엇입니까?

z-index가 고정 위치에서 작동하지 않음

페이지 레이아웃에서 z-index는 웹 페이지 요소의 스택 순서를 결정합니다. 더 높은 값이 맨 위에 표시됩니다. 그러나 요소가 고정적으로 배치되어 직관에 어긋나는 경우 Z-인덱스를 사용하여 정적으로 배치된 요소 뒤에 요소를 배치하는 것이 어려울 수 있습니다.

예

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

<div>

#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;
}

예에서 알 수 있듯이 더 높은 수준에도 불구하고 #over에 할당된 z-index 값, 고정 위치 요소 #under가 맨 위에 유지됩니다.

설명

혼란스러운 동작은 정적 요소와 고정 요소의 본질적인 차이에서 발생합니다. 위치 지정.

• 정적 위치 지정은 요소가 일반적인 흐름에 있기 때문에 Z-색인의 영향을 받지 않습니다. document.
• 반면 고정 위치 지정은 일반적인 흐름에서 요소를 제거하고 뷰포트(사용자 화면)를 기준으로 위치를 지정합니다.

이 맥락에서 z- 인덱스는 다른 고정 요소를 기준으로 고정 요소의 스택 순서만 결정합니다. elements.

해결책

이 문제를 해결하려면 정적으로 배치된 요소에 상대적인 위치를 추가하세요. 이는 #over에 대한 새로운 스택 컨텍스트를 생성하여 z-index가 새로 생성된 컨텍스트를 기준으로 위치를 결정할 수 있도록 합니다.

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

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

위 내용은 고정 위치 지정 시 Z-Index가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!