Z-색인을 사용하지 않고 상위 요소 뒤에 하위 요소를 배치하는 방법은 무엇입니까?

Z-색인 없이 상위 요소 뒤에 하위 요소를 배치하는 방법

질문

일부 시나리오에서는 하위 요소가 아래에 표시되어야 할 수도 있습니다. (또는 뒤) DOM 트리에서의 위치에 관계없이 상위 항목입니다. 그러나 z-index 및 position:relative 설정으로는 이 효과를 얻을 수 없는 것 같습니다.

해결책

CSS의 발전 덕분에 이제 CSS 3D 변환을 사용하여 이 작업을 수행할 수 있습니다. 방법은 다음과 같습니다.

 background: red;<br> width: 100px;<br> height: 100px; <br> 변환 스타일: 보존-3D;<br> 위치: 상대;<br>}<p>.child {<br> 배경: 파란색;<br> 너비: 100px;<br> 높이: 100px;<br> 위치: 절대;<br> 상단: -5px ;<br> 왼쪽: -5px;<br> 변환: translateZ(-10px)<br>}</p>

 상위<br> <div>
<pre class="brush:php;toolbar:false">Child

여기서 예:

1. 상위 div에는 요소와 해당 하위 요소에 대한 3D 변환을 가능하게 하는 변환 스타일: 보존-3d 속성이 있습니다.
2. 하위 div는
3. 자식의 변환: 번역Z(-10px) 속성은 부모를 따라 10픽셀 뒤로 이동합니다. z축.

결과적으로 하위 요소는 상위 요소 뒤에 나타나 상위 요소의 뷰를 가리지 않고 오버레이됩니다. 이 기술은 모든 최신 브라우저에서 작동합니다.