CSS에서 Z-Index를 사용하여 상위 및 하위 요소를 올바르게 레이어화하려면 어떻게 해야 합니까?

Z-Index에서 상위 요소와 하위 요소 분리

CSS에서 z-index 속성은 웹 페이지 요소의 레이어링을 제어합니다. . 그러나 CSS가 스택 컨텍스트를 처리하는 방식으로 인해 Z-색인이 더 높음에도 불구하고 상위 요소가 하위 요소 뒤에 나타날 수 있는 경우가 있습니다.

이 문제를 해결하기 위해 항상 음수 Z-색인을 사용할 필요는 없습니다. 자식 요소에. 대신 다음 해결 방법을 고려하십시오.

부모의 Z-색인을 제거하고 자녀의 Z-색인을 변경합니다.

부모에 Z-색인을 설정하는 대신 이를 제거합니다. 자식에 음수 z-index를 설정합니다. 이렇게 하면 하위 요소가 페이지 컨테이너 밖으로 밀려나지 않고 상위 요소 아래에 유지됩니다.

수정된 CSS 코드는 다음과 같습니다.

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

상대 위치 확인:

상위 요소와 하위 요소 모두 적절한 위치를 활성화하려면 위치 속성을 상대 또는 절대로 설정해야 합니다. 레이어링.

HTML 예:

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

이 솔루션은 페이지의 전체 레이아웃을 방해하거나 예상치 못한 동작을 일으키지 않고 상위 요소를 하위 요소 위에 배치합니다.

위 내용은 CSS에서 Z-Index를 사용하여 상위 및 하위 요소를 올바르게 레이어화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!