How Can CSS Transform 3D Reverse Sibling Element Stacking Order?

How to Achieve Sibling Element Stacking Order Reversal Using CSS and Transform 3D

Understanding the issue, you aim to ensure that a child element consistently appears behind its parent regardless of their position within the DOM tree. While z-indexing may seem like a suitable solution, it often proves ineffective in such scenarios.

To address this challenge and achieve the desired stacking order reversal, modern browsers now offer a powerful technique utilizing transform 3D and CSS.

Consider the below CSS snippet:

.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 assigned a red background and dimensions of 100px by 100px. It is positioned relatively and utilizes the transform-style: preserve-3d property to create a 3D stacking context.

The child element, on the other hand, is given a blue background and the same dimensions. It is positioned absolutely within the parent, with slight negative top and left offsets. Crucially, it is assigned a transform: translateZ(-10px) property, which shifts it 10px back along the z-axis in the 3D space created by the parent's transform-style property.

As a result, despite its position within the DOM tree, the child element effectively appears behind its parent due to its negative translation on the z-axis. This technique effectively reverses the stacking order, ensuring that the child remains behind the parent at all times.

The above is the detailed content of How Can CSS Transform 3D Reverse Sibling Element Stacking Order?. For more information, please follow other related articles on the PHP Chinese website!