Why Does z-index Fail on Transformed Elements and How Can It Be Fixed?

z-index Canceled Due to Transformation

In your provided code, the CSS property z-index loses functionality when applied to the element .test after applying a transform property. This issue arises because the transform property establishes a new stacking context for the element.

Stacking contexts determine the order in which overlapping elements are displayed. Typically, elements with a higher z-index value appear above elements with a lower z-index value within the same stacking context. However, z-index only applies within a single stacking context.

In your scenario, the .test element with its transform property has created its own stacking context. The pseudo-element .test:after, though a child of .test, remains within this new stacking context. Therefore, setting z-index: -1 on .test:after only positions it within the stacking context of .test but does not place it behind .test.

To solve this, you can **create a new stacking context for both .test and .test:after** by wrapping them in a container element. This approach ensures that they share the same stacking context, allowing z-index` to function as expected.

Here's the modified code:

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

By creating a separate stacking context for .wrapper, both .test and .test:after share the same context. This allows z-index to correctly position .test:after behind .test while maintaining the desired rotation.

The above is the detailed content of Why Does z-index Fail on Transformed Elements and How Can It Be Fixed?. For more information, please follow other related articles on the PHP Chinese website!