z-index가 더 높음에도 불구하고 div1이 div2 위에 나타나지 않는 이유는 무엇입니까?

z-index를 사용하여 다른 Div 위에 Div 배치

웹 개발에서 원하는 결과를 얻기 위해 div를 서로 겹쳐야 하는 상황에 직면할 수 있습니다. 시각 효과. 그러나 z-index를 사용한다고 해서 항상 예상한 결과가 나오는 것은 아닙니다.

한 가지 일반적인 문제는 div1이 더 높은 z-index 값을 제공했음에도 불구하고 div2 위에 표시되지 않는 경우입니다. 그 이유는 적절한 스택 컨텍스트가 부족하기 때문일 수 있습니다.

스태킹 컨텍스트를 설정하려면 두 div에 상대적인 CSS 속성 position:을 추가해야 합니다. 이렇게 하면 z-index 값이 의도한 대로 작동할 수 있는 새로운 스택 컨텍스트가 생성됩니다.

코드의 업데이트된 버전은 다음과 같습니다.

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

이 수정을 통해 이제 div1이 위에 올바르게 표시됩니다. div2. Z-인덱스는 동일한 스택 컨텍스트 내의 스택 순서에만 영향을 미친다는 점을 기억하세요.

위 내용은 z-index가 더 높음에도 불구하고 div1이 div2 위에 나타나지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!