如何防止CSS中的絕對元素重疊？

絕對元素的垂直重疊：解

在HTML 程式碼中，您定義了兩行，#row1 和#row2，絕對定位。出現此問題的原因是絕對元素從正常文件流中刪除並相互堆疊，導致內容重疊。

要解決這個問題，我們需要了解絕對定位的目的和行為。透過將元素設為position:absolute;，我們將其從標準流中刪除，並將其相對於其最近定位的祖先進行定位。

在您的範例中，.row 和 .col1、.col2 是嵌套在其中的絕對元素.container，這也是絕對的。然而，由於這三個元素都是絕對的，因此它們都變得獨立且重疊。

為了解決這個問題，我們需要建立一個適當的定位層次結構。我們可以透過將 .row 設定為相對定位來實現這一點。這樣，.col1 和 .col2 將保持絕對值，但它們將相對於文檔流中的 .row 定位。

此變更允許 #row1 和 #row2 垂直堆疊，尊重正常情況區塊元素行為。這是修改後的 CSS：

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

此修改保留了您所需的定位屬性，同時確保 #row1 和 #row2 按預期顯示在彼此下方。

以上是如何防止CSS中的絕對元素重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！