Home >Web Front-end >CSS Tutorial >Why Does z-index Fail on Transformed Elements and How Can It Be Fixed?

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

DDD
DDDOriginal
2024-12-15 05:19:11842browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn