理解CSS 繪製順序和重疊元素
在給定的場景中，我們觀察到兩個具有衝突背景的div，一個與另一個重疊。然而，由於特定的 CSS 繪製順序規則，重疊的 div 在底層 div 的背景和內容之間滑動。
根據W3C 的CSS 繪製順序文檔，具有堆疊上下文的元素的後代的繪製順序（重疊的div 由於其負邊距而具有）如下：
-
從負數堆疊上下文z 索引： 首先，任何具有負z 索引的子元素都會形成自己的堆疊上下文，並按降序繪製。
-
流入的非定位子元素： Next ，所有流入的非定位塊級子級（在本例中包括第二個div）都繪製在樹中
-
流入塊級子級的背景和邊框：在每個子級中，繪製它們的背景和邊框。重疊的 div 背景在此階段繪製。
-
流內非定位內聯子級： 繪製所有區塊級子級後，所有內聯元素及其內容都按樹順序繪製.
-
從正z 索引堆疊上下文： 最後，從具有正z 索引的元素堆疊上下文z 索引按升序繪製。
重疊元素的含義
重疊div 的具體問題是第二個div 的背景（來自步驟3) 在其文本內容之前繪製（來自步驟4）。這會導致文字出現在第一個 div 的內容和背景之間。
解決問題
要解決這個問題，您可以使用以下方法之一：
-
為重疊的div 設定一個正的z-index： 這將確保其堆疊上下文在第一個div 的背景之後繪製。
-
在重疊的 div 上使用 CSS 位置：相對： 這將為 div 及其後代建立一個新的堆疊上下文，允許您控制使用 z-index 的繪製順序。
-
在重疊的 div 上新增透明層： 這將有效地將文字內容移至「上方」圖層，繞過重疊的 div 背景。
以上是為什麼我的重疊 Div 的背景會出現在其內容後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
