올바른 z-색인 사용에도 불구하고 순서가 잘못된 Div를 수정하는 방법은 무엇입니까?

z-index로 스택 순서 제어

HTML에서 요소를 계층화할 때 z-index는 어떤 요소가 맨 위에 표시되는지 제어합니다. Z-색인을 올바르게 사용했음에도 불구하고 div가 다른 div 아래에 남아 있는 경우가 발생할 수 있습니다.

이 문제를 해결하려면 다음을 고려하십시오.

CSS 코드:

<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>

설명:

1. 위치 추가: 두 div에 상대적으로 스택 컨텍스트를 생성합니다. 이렇게 하면 Z-인덱스가 올바르게 작동할 수 있습니다.
2. 맨 위에 표시되어야 하는 div(div1)에 대해 더 높은 Z-인덱스를 설정합니다.
3. 기본 div( div2)가 더 낮습니다.

이러한 단계를 구현하면 div1이 원하는 스택 순서로 div2 위에 올바르게 표시됩니다.

위 내용은 올바른 z-색인 사용에도 불구하고 순서가 잘못된 Div를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!