為什麼固定元素會受到未定位同級元素的影響？

理解固定元素的行為：為什麼它們會受到非定位同級元素的影響

在CSS定位領域，它出現了令人困惑的是為什麼具有position:fixed的元素會受到非定位同級元素的影響。然而，理解底層機制揭示了一個合乎邏輯的解釋。

帶有position:fixed的元素將從正常文件流中刪除並相對於瀏覽器視窗定位。視口是網頁在瀏覽器視窗內的可見區域。

在您提供的範例中，標題元素是固定的，而主元素的 margin-top: 90px。令人驚訝的是，標題向下移動，就好像它受到邊距的影響一樣。

要理解這種行為，我們必須考慮 CSS 邊距折疊的作用。當兩個有邊距的元素接觸時，它們的邊距合併為一個邊距。在本例中，body 元素（主元素的父元素）的預設邊距為 8px。當施加主元素的 margin-top 90px 時，會發生邊距折疊，導致組合邊距為 98px。

此組合邊距將主體元素和主元素向下移動 98px。由於標題相對於視口是固定的，因此它會隨著視窗移動，視口是根據文件流中的元素計算的。由於主元素是第一個流入元素，其邊距會影響視窗的計算，導致 header 看起來向下移動。

本質上，固定 header 的位置並不會直接受到非固定 header 的影響。 - 在身體定位方面定位兄弟姊妹。然而，同級的邊距會影響視口計算，間接影響標題的明顯移動。

以上是為什麼固定元素會受到未定位同級元素的影響？的詳細內容。更多資訊請關注PHP中文網其他相關文章！