CSS에서 상위 요소를 하위 요소 위에 표시하는 방법은 무엇입니까?

Z축에서 상위 요소를 하위 요소 위로 올리는 방법

CSS에서는 중첩된 요소의 원하는 스택 순서를 달성하는 것이 어려울 수 있습니다. 이 질문은 하위 요소가 Z축에서 상위 요소 위에 표시되고 Z-인덱스 설정만으로는 충분하지 않은 시나리오를 다룹니다.

이 문제를 해결하려면 음수 Z-인덱스 값을 설정해야 합니다. 하위 요소의 경우. 이와 대조적으로 상위 요소의 모든 Z-색인 설정은 제거되어야 합니다. 이렇게 하면 문서 구조 내에서 요소의 원하는 위치를 유지하면서 Z축에서 하위 요소 위에 상위 요소를 효과적으로 올릴 수 있습니다.

다음 코드 예제를 고려하세요.

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;  // Negative z-index applied to the child element
}

.wrapper {
  position: relative;
  background: green;
  height: 350px;
}

이 수정을 통해 이제 상위 요소가 Z축에서 하위 요소 위에 표시되어 원래 질문에 설명된 문제가 효과적으로 해결됩니다.

위 내용은 CSS에서 상위 요소를 하위 요소 위에 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!