How Can I Display a Child Element Behind Its Parent Using CSS?

Z-Index Woes: Displaying a Child Element Behind Its Parent

Achieving the desired visual effect of displaying a child element behind its parent in the document object model (DOM) tree can be a perplexing task. Despite the widespread implementation of the z-index property, it sometimes fails to produce the expected outcome.

One reliable approach to address this issue, especially in modern browsers, is to leverage CSS3's transform 3D property. This technique has gained prominence in recent years and provides a workaround for this long-standing challenge.

.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);
}

In this example, the parent element is given a transform-style of preserve-3d, which enables the creation of a 3D rendering context. The child element is then positioned absolutely within the parent and offset slightly through top and left properties. Finally, the transform: translateZ(-10px) is applied to the child, effectively sending it backwards in the Z dimension.

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

This technique allows the child element to overlap the parent while still displaying behind it, providing the desired visual effect. It eliminates the need for absolute or fixed positioning, offering greater flexibility in the design of your dynamic elements.

The above is the detailed content of How Can I Display a Child Element Behind Its Parent Using CSS?. For more information, please follow other related articles on the PHP Chinese website!