z-index가 고정 위치 요소와 함께 작동하지 않는 이유는 무엇입니까?

z-index가 고정 위치 지정과 작동하지 않음: 이유 풀기

고정 위치 지정은 화면의 제자리에 유지되는 요소를 만드는 강력한 도구입니다. 스크롤과 상관없이 화면이 보입니다. 그러나 요소의 스택 순서를 제어하는 ​​z-index 속성을 방해할 수도 있습니다.

설명을 위해 다음 코드 조각을 고려해보세요.

#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-색인을 가지므로 #under 요소 위에 나타나야 합니다. 그러나 이 시나리오에서는 #under가 여전히 #over를 오버레이합니다. 왜 이런 일이 발생하는 걸까요?

답은 #over의 기본 위치에 있습니다. 기본적으로 요소에는 정적 위치 지정이 있습니다. 즉, 요소는 문서 흐름에서 자연스러운 위치를 차지합니다. 반면에 고정 위치 요소는 일반 흐름에서 제거되어 페이지의 뷰포트를 기준으로 특정 좌표에 배치됩니다.

이 경우 #under의 고정 위치는 일반 흐름에서 벗어납니다. , 따라서 해당 z-인덱스는 정적 위치 지정이 있는 요소와 관련이 없게 됩니다. #under가 #over 뒤에 나타나도록 하려면 #over의 위치를 ​​상대 위치로 설정해야 합니다. 이렇게 하면 문서 흐름에 #over가 배치되지만 지정된 Z-색인에 따라 위치를 이동할 수 있습니다.

고정 코드 조각은 다음과 같습니다.

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

이제 #under 요소는 예상대로 #over 아래에 나타납니다. Z-색인이 제대로 작동하려면 요소의 위치가 절대 위치 또는 상대 위치에 있어야 한다는 점을 기억하세요.

위 내용은 z-index가 고정 위치 요소와 함께 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!