CSS Transform 3D를 사용하여 상위 요소 뒤에 하위 요소를 배치하려면 어떻게 해야 합니까?

Transform 3D를 사용하여 상위 요소 뒤에 하위 요소를 겹치는 방법

질문:

어떻게 보장할 수 있나요? 동적 하위 요소는 DOM에서의 위치에 관계없이 항상 상위 요소 앞에 나타납니다. tree?

답변:

CSS를 사용하면 최신 브라우저에서 변환 3D 속성으로 이를 달성할 수 있습니다.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

이 CSS는 다음을 구성합니다. 3D 변환 스타일을 사용하여 상위 요소를 만들고 그 안에 하위 요소를 절대적으로 배치합니다. 변환: 번역Z(-10px) 속성은 하위 요소를 Z축을 따라 10px 뒤로 이동하여 상위 요소 뒤에 표시되도록 합니다.

HTML 구조:

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

위 내용은 CSS Transform 3D를 사용하여 상위 요소 뒤에 하위 요소를 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!