Why Does `transform` Cancel `z-index` and How Can I Fix It?

z-index Canceled by Transform: Understanding Stacking Contexts

In the provided code, the ".test" element's z-index is canceled when the transform property is applied. To comprehend this behavior, we must delve into the concept of stacking contexts.

Self-Contained Stacking Contexts:

transform creates a stacking context for the ".test" element. Stacking contexts determine the order of elements based on their z-index values. Elements within the same stacking context are layered according to their z-indices, with higher values appearing in front.

Inherited Stacking Contexts:

The ".test:after" pseudo-element has a negative z-index (-1). However, this value only affects its position within the ".test" element's stacking context. It does not place ".test:after" behind ".test" because z-index is only meaningful within individual stacking contexts.

Resolving the Problem:

To have z-index work as expected, ensure that ".test" and ".test:after" share the same stacking context. While rotating ".test" with transform creates its own stacking context, using a wrapper element and rotating it allows ".test:after" to inherit the same context.

Updated Code with Wrapper:

By enclosing ".test" in a ".wrapper" and applying the transform to it, we preserve the z-index hierarchy for ".test:after" while still rotating both ".wrapper" and ".test."

<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>

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

The above is the detailed content of Why Does `transform` Cancel `z-index` and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!