如何在 CSS 中垂直堆疊重疊的絕對定位元素？

解決垂直堆疊的重疊絕對定位元素

在 CSS 中，position 屬性可以設定為各種值，包括相對、絕對和固定。當一個元素被絕對定位時，它會從正常的文檔流中刪除，並相對於其最近的定位祖先或視口進行定位。此行為可能會導致元素堆疊在一起，這可能不是所需的效果。

了解元素定位

• 靜態（預設）：元素在文件流中正常堆疊。
• 相對： 元素保留在文件流，但可以使用頂部、右側、底部和左側調整它們的位置。
• 絕對： 元素將從文檔流中刪除，並相對於其最近的定位祖先進行定位。

重疊絕對定位元素

在下面的範例中，具有類別.row 和.row 的元素.col 是絕對定位的，導致它們重疊：

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

要解決此問題並使元素垂直堆疊，我們需要指定它們的高度並確保正確管理它們的垂直位置。

不刪除位置屬性的解決方案

雖然修改元素的CSS 並不理想，但不刪除位置屬性的可能解決方案是指定元素的高度每個.row 並調整第二個.row 的top 屬性以考慮第一個.row的高度：

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

理解解

• 我們保持絕對定位元素的數量。
• 我們為每個 .row 指定一個高度以允許垂直堆疊。
• 我們調整第二個 .row (#row2) 的 top 屬性，將其偏移第一個 .row (#row1) 的高度。

注意事項

• 確保.row 元素的高度是準確的，並且包括任何填充或邊距。
• 此解決方案可能不適合動態產生的未知內容高度。
• 通常不建議有多個嵌套的絕對定位元素，因為它可能會導致複雜的行為。

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