透過轉換取消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中文網其他相關文章!