保證金影響其他固定元素的位置

我想在固定位置設置頂部標題，並在其下面滾動內容並遇到一些奇怪之處。如果我將margin-top設置爲內容div，即使margin設置爲position：fixed，margin也會影響標題並將其向下移動。我發現一個解決方法是將內容div設置爲position：relative並使用top：來抵消它的相同數量，但我覺得很奇怪，一個非嵌套div會影響一個固定位置的元素，並且想知道它爲什麼會發生。保證金影響其他固定元素的位置

我在Safari，Firefox和Chrome中獲得了同樣的結果。在Opera中，邊緣壓縮內容並將標題留在原地，這正是我期望它做的，但與其他結果相比，Opera可能有錯誤。我所說的可以在this JSFIDDLE（不要使用Opera！:)）中看到。

下面的代碼：

CSS：

body { 
    background:#FFD; 
} 

#header { 
    position:fixed; 
    height:15px; 
    width:100%; 
    text-align:center; 
    border-bottom:1mm dashed #7F7F7F; 
    background-color:#EEE; 
} 

#content { 
    width:90%; 
    margin-top:25px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#E5E5FF; 
    border: 1px solid #000; 
}

HTML：

<body> 
    <div id="header"> 
     HEADER 
    </div> 
    <div id="content"> 
     <p>Text1</p> 
     <p>Text2</p> 
     <p>Text3</p> 
     <p>Text4</p> 
    </div> 
</body>

來源

2012-03-08 seron

#header { 
    top: 0px !important; 
}

來源

2012-03-08 21:22:38 Seabass

'！important'沒有必要。 – 2012-03-08 21:23:21

你是對的 - 很好。 – Seabass 2012-03-08 21:26:11

多麼尷尬的錯過了。謝謝！對於非後裔元素適用相同的保證金仍然有點奇怪，你不覺得嗎？ – seron 2012-03-09 16:59:34

#content是固定的位置，但您爲top設置的座標，right，bottom和left重新與其父容器相關聯：#header。換句話說，#content總是要固定在#header的頂部。由於您將margin撞上了#header，因此將出現#content。

您也需要以抵消保證金

#content { position: fixed; top:-25px; }

這麼說，我想你想修復某些東西在屏幕的頂部，我不認爲這是會得到你想要的東西。您需要在#header之外突破#content或使#header靜態定位：position:static，以便將內容固定到窗口頂部，而不是頭部。

來源

2012-03-08 21:31:04 Jeff

-1

我相信你感覺到「邊緣崩潰」的影響，這會導致你的「內容」中的「邊緣頂部」條目摺疊到頁面的主體元素中。一個簡單的解決方法就是圍繞「內容」和「標題」創建一個包含div，並將CSS設置爲「overflow：hidden」。然後，確保將「body」元素的頁邊距和填充設置爲0.

來源

2012-03-08 23:09:25 Zensar

從我讀到的邊緣崩潰利潤率不會出現，反之亦然。無論如何，「頂部：0px」做到了，正如Zenbait所指出的那樣。 – seron 2012-03-09 16:55:23

@seron我認爲你讀到的有關保證金崩潰的內容不正確。保證金崩潰使用兩個值中較大的一個來設置保證金，這與使保證金無法出現完全相反。請參閱[本主題]（http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers）以獲取關於如何導致您的問題的更詳細的解釋描述。 – Adam 2017-02-09 20:10:32

或者將#content的頂部填充（而不是頂部頁邊距）設置爲#header的高度。

我們已經想出了正確定位標題的方法，但我仍然很好奇爲什麼偏移發生在第一位。

來源

2012-05-23 23:33:41 user1413795

保證金影響其他固定元素的位置

回答

相關問題