首頁 >web前端 >css教學 >為什麼我的固定標題會壓低我的內容,我該如何修復它?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-16 15:32:18378瀏覽

Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

固定標題下推內容

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

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

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

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*/
}

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn