為什麼負邊距的 Div 看起來會在另一個 Div 的內容和背景之間滑動？

重疊元素的內容重疊：理解謎題

簡介

在這種情況下，我們有兩個沒有任何內容的div複雜的樣式（簡單的背景顏色）。我們透過應用負的 margin-top 來操縱第二個 div 與第一個 div 重疊。然而，我們並沒有看到一個元素與另一個元素完全重疊，而是發現第二個 div 在第一個 div 的內容和背景之間滑動，表現出意想不到的行為。

繪畫順序

要理解這種行為，我們需要深入研究瀏覽器中繪畫順序的複雜性。堆疊上下文中元素的繪製順序遵循預先定義的順序：

1. 元素的背景顏色，即使它是根元素。
2. 元素的背景影像，即使它是它是根元素。
3. 元素的內容，例如文字和圖像，從下到上繪製top.
4. 子元素的背景和邊框。

解釋重疊

在我們的例子中，當第二個div 與第一個div 重疊時，會發生以下繪製順序：

1. 第二個div 的背景色繪製在第一個div 的背景。
2. 第一個 div 的內容被繪製。
3. 第二個 div 的內容被繪製在第一個 div 的內容之上。

自第一個 div 的內容在第二個 div 的背景之前繪製，文字似乎位於綠色背景上方，從而產生第二個 div在兩者之間滑動的錯覺

更改行為

雖然預設繪製順序可能會導致這種情況，但可以透過將重疊元素的不透明度設為值小於1。這會在內容繪製步驟之前觸發不透明度繪製步驟，確保重疊元素的背景出現在其下方內容。

在我們的範例中，新增 opacity: 0.9999 在第二個 div 會產生預期的行為，其中綠色背景完全覆蓋第一個 div 的內容。

參考

CSS繪製順序的詳細解釋可以參考W3C官方文件：

https://www.w3.org/TR/css -backgrounds-3/#box-painting

以上是為什麼負邊距的 Div 看起來會在另一個 Div 的內容和背景之間滑動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！