為什麼固定標頭會與未定位的同級標頭一起移動？

理解固定元素行為：為什麼固定標題會與未定位的同級元素一起移動

CSS 中的固定定位將元素放置在固定的元素中相對於視口的位置。但是，重要的是要了解視口是根據正常文件流中的元素計算的。

在提供的 HTML 中，標頭元素是固定的，而主元素則應用了 margin-top。當這些元素放置在文件中時，會發生以下情況：

1. 固定標題： 位置為固定的標題元素將從文件流中刪除並放置在
2. 文檔流程計算： 從主元素開始，其餘元素建立文檔流。套用於主要元素的 margin-top: 90px 表示標題和主要內容之間的垂直間距。
3. 視口計算：視口是根據文件流中的元素計算的。由於第一個流入元素是 main 元素，其 margin-top 為 90px，因此視口從此時開始。
4. Margin Collapsing： body 元素，main 的父元素，預設邊距為 8px。由於 CSS 邊距折疊，main 的 margin-top (90px) 與 body 的 margin-top (8px) 折疊在一起，導致合併後的邊距為 98px。

因此，兩者即使標題固定在視口上，主元素和標題也會下移 98px。這是因為視口本身是根據文件流程中的折疊邊距進行調整的。

因此，重要的是要考慮到，雖然固定元素相對於視口定位，但視口的位置是由其中的元素決定的常規文件流程。這種理解解釋了為什麼固定標題可以與非定位同級元素一起移動。

以上是為什麼固定標頭會與未定位的同級標頭一起移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！