Home >Web Front-end >CSS Tutorial >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!