為什麼 `transform` 會取消 `z-index` 以及如何修復它？

透過轉換取消z-index：了解堆疊上下文

在提供的程式碼中，「.test」元素的z-index 被取消當應用程式變換屬性時。要理解這種行為，我們必須深入研究堆疊上下文的概念。

自包含堆疊上下文：

transform 為「.test」建立一個堆疊上下文元素。堆疊上下文根據元素的 z-index 值決定元素的順序。同一堆疊上下文中的元素根據其 z 索引進行分層，較高的值出現在前面。

繼承的堆疊上下文：

“.test:after” " 偽元素的z 索引為負(-1)。但是，該值僅影響其在“.test”元素的堆疊上下文中的位置。僅在單獨的堆疊上下文中有意義。按預期工作，確保“.test”和“.test:after”共享相同的堆疊上下文。 after」繼承相同的上下文。

使用包裝器更新程式碼：

透過將“.test”封裝在“.wrapper”中並對它應用變換，我們保留了“.test:after”的z-index 層次結構，而仍在旋轉“.wrapper”和“.test”。

以上是為什麼 `transform` 會取消 `z-index` 以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！