為什麼我的固定標題會壓低我的內容，我該如何修復它？

固定標題下推內容

在我的標題中，我放置了頁面標題和導航欄，但是一旦我設定了它位置：固定；頂部的邊距增加了。以下是 Codepen 的連結：

您面臨邊距崩潰問題。固定標題後，您將其從流程中刪除，您的表單成為第一個流入元素，因此其上邊距將與正文的上邊距合併¹。這意味著主體將有一個很大的上邊距，並且您的固定元素將根據主體進行定位，因為您沒有設定任何頂部值²。

為了避免這種情況，您只需需要停用邊距折疊（我建議這樣做以避免其他問題）或設定頂部值以將元素移動到您想要的位置

body {
 padding-top:1px; /*disable margin-collpasing*/
}

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [這個邊距不會出現，因為body沒有設定margin，它是元素和body之間的空間](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [了解更多關於如何這在本文中有效。 ](https://css-tricks.com/ Couple-margin-collapsing-gotchas/)

以上是為什麼我的固定標題會壓低我的內容，我該如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！