為什麼我的絕對定位元素是垂直堆疊而不是水平堆疊？

絕對元素垂直堆疊而不是水平堆疊

在 CSS 中，使用絕對定位定位元素可能會導致意外的堆疊行為。要理解為什麼絕對元素彼此堆疊而不是並排放置，讓我們深入研究 CSS 定位的基礎知識。

相對與絕對定位

當使用position:relative定位元素時，它會保持其在正常文件流中的位置，但可以使用top、right、 bottom或left屬性進行移動。具有相對定位的元素不會影響周圍元素的佈局。

相反，具有position:absolute的元素將從文件流中刪除，並相對於其包含元素或最近的定位祖先進行定位。絕對元素佔據自己的空間，不再與流中的其他元素互動。

在您的範例中

在您的程式碼中，#row1 和 #row2 都具有絕對值定位，使它們獨立於文件流。由於這些元素都是絕對定位的 .container 的子元素，因此它們是相對於它定位的。由於#row1位於#row2之前，因此它顯示在它的頂部。

解決問題

要垂直顯示#row1和#row2，您需要刪除這些元素的絕對定位並將其應用於它們的包含元素 .container。這使得行的行為就像普通的塊元素一樣，垂直堆疊在另一個元素下面。

理解CSS 位置

為了進一步澄清，讓我們來探討不同的CSS 位置值：

• static :
元素保留在正常文件流。
• 相對：
元素保留其在流中的位置，但可以使用頂部、右側、底部或左側屬性移動。
• 絕對:
元素從流中移除並相對於其包含元素或最近定位的元素進行定位
• 已修復：
元素從流中移除並相對於視口定位。

透過了解 CSS 定位的工作原理，您可以有效地控制網頁上元素的佈局和堆疊。

以上是為什麼我的絕對定位元素是垂直堆疊而不是水平堆疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！