How to Place a Child Element Behind Its Parent Without Using Z-index?

  background: red;<br>  width: 100px;<br>  height: 100px;<br>  transform-style: preserve-3d;<br>  position: relative;<br>}</p><p>.child {<br>  background: blue;<br>  width: 100px;<br>  height: 100px;<br>  position: absolute;<br>  top: -5px;<br>  left: -5px;<br>  transform: translateZ(-10px)<br>}

  Parent<br>  <div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Child

In this example:

1. The parent div has the transform-style: preserve-3d property, which enables 3D transforms for the element and its children.
2. The child div is positioned absolutely within the parent.
3. The transform: translateZ(-10px) property on the child moves it 10 pixels backward along the z-axis.

As a result, the child element will appear behind the parent, overlaying it without obscuring its view. This technique works in all modern browsers.

The above is the detailed content of How to Place a Child Element Behind Its Parent Without Using Z-index?. For more information, please follow other related articles on the PHP Chinese website!