Div2보다 낮은 Z-Index 값을 지정해도 첫 번째 DIV Div1이 계속 표시되는 이유는 무엇입니까?

z-index를 사용하여 DIV 중첩

이 질문은 Z-index를 사용하여 DIV 요소의 스택 순서를 제어하는 ​​방법을 탐구합니다. 질문자는 z-인덱스를 사용하여 하나의 DIV(div1)를 다른 DIV(div2) 위에 중첩하려고 시도했지만 원하는 효과를 얻지 못했습니다.

제공된 코드에는 Z-인덱스 값이 다른 두 개의 DIV 요소가 포함되어 있습니다.

<code class="css">.div1 {
  z-index: 1;
}
.div2 {
  z-index: 2;
}</code>

div2의 z-index가 더 높음에도 불구하고 div1은 그 앞에 계속 표시됩니다. 이는 요소의 위치가 명시적으로 설정되지 않았기 때문입니다.

이 문제를 해결하려면 두 div에 상대적인 위치를 추가해야 합니다. 이렇게 하면 스택 컨텍스트가 생성되어 요소가 서로 상대적으로 배치될 수 있습니다. 업데이트된 코드는 다음과 같습니다.

<code class="css">.div1 {
  z-index: 2;
  position: relative;
}
.div2 {
  z-index: 1;
  position: relative;
}</code>

이 수정을 통해 div1은 생성된 스택 컨텍스트 내에서 z-index 값이 우선 적용되므로 div2 위에 올바르게 배치됩니다.

위 내용은 Div2보다 낮은 Z-Index 값을 지정해도 첫 번째 DIV Div1이 계속 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!