為什麼 z-index 在轉換元素上失敗以及如何修復？

z-index 由於轉換而取消

在您提供的程式碼中，CSS 屬性z-index 在應用於元素時會失去功能。應用變換屬性後進行測試。出現此問題的原因是轉換屬性為元素建立了新的堆疊上下文。

堆疊上下文決定重疊元素的顯示順序。通常，在同一堆疊上下文中，具有較高 z-index 值的元素會出現在具有較低 z-index 值的元素之上。但是，z-index 僅適用於 單一堆疊上下文。

在您的場景中，具有轉換屬性的 .test 元素已建立自己的堆疊上下文。偽元素 .test:after 雖然是 .test 的子元素，但仍保留在這個新的堆疊上下文中。因此，在 .test:after 上設定 z-index: -1 只會將其放置在 .test 的堆疊上下文中，但不會將其放置在 .test 後面。

要解決此問題，您可以 **建立一個新的透過將 .test 和 .test:after** 包裝在容器元素中來堆疊上下文。這種方法確保它們共享相同的堆疊上下文，從而允許 z-index` 按預期運行。

這是修改後的程式碼：

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

透過為 .wrapper 建立單獨的堆疊上下文，.test 和 .test:after 共享相同的上下文。這允許 z-index 正確地將 .test:after 定位在 .test 後面，同時保持所需的旋轉。

以上是為什麼 z-index 在轉換元素上失敗以及如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！