為什麼固定標頭會隨著兄弟姐妹的移動而移動？

固定標題移動性：解開謎團

問題：

儘管它被認為是不可移動的，但為什麼具有位置的元素：與非定位同級元素一起固定移位？

答案：

雖然固定元素確實錨定到瀏覽器窗口，但它們的位置是相對於視口計算的，這包含文檔流中的元素。由於本例中文檔流中的第一個元素是非標題 div，因此在套用 margin-top 屬性後確定視窗。

因此，當將margin-top: 90px 套用到非標題時， header div:

1. body 元素的預設邊距(8px) 與主元素的margin-top ( 90px) 折疊在一起。
2. 兩個元素都向下移動 90px，包含header 元素的位置為：fixed。
3. 這是因為視口是從 body 元素的頂部開始計算的，而不是固定元素。

結論：

固定元素儘管已從文檔流中刪除，但仍受到該流中元素定位的影響。理解這種關係對於網頁上的準確佈局和定位至關重要。

以上是為什麼固定標頭會隨著兄弟姐妹的移動而移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！