爲什麼我的保證金不符合頭寸：固定？

Question

JSFiddle Demo

我有一個div的頭和一個內容包裝的div。

出於某種原因，我無法在標題的底部留出邊緣來強制內容包裝下推。它完全忽略它，我不知道爲什麼。

有沒有人知道這是怎麼回事？當我拿走這個位置時它不會這樣做：固定的;屬性的標題，但我希望它被固定在頂部，所以當滾動標題總是在視圖中。

希望有人可以解釋爲什麼會發生這種情況，或者至少它是什麼所以我可以谷歌它。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
\t font-family: arial; 
 
\t background: #5A9910; 
 
\t text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #ffffff; 
 
\t -webkit-box-shadow: 0 8px 6px -6px #333; 
 
\t -moz-box-shadow: 0 8px 6px -6px #333; 
 
\t box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
\t width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
\t width: 80%; 
 
\t height: 1600px; 
 
\t background: #ccc; 
 
\t margin: 0 auto; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

Answer 1

我想你必須明確聲明固定div的位置。在內容DIV

div.contentwrap { 
width: 80%; 
height: 1600px; 
background: #ccc; 
margin: 80px auto; 
} 

檢查此琴，如果像你這樣的作品需要

div.header { 
position: fixed; 
width: 100%; 
background: #ffffff; 
top:20px; 
-webkit-box-shadow: 0 8px 6px -6px #333; 
-moz-box-shadow: 0 8px 6px -6px #333; 
box-shadow: 0 8px 6px -6px #333; 
} 

和分配保證金： https://jsfiddle.net/0cmvg92m/3/

Answer 2

保證金不起作用，因爲頭部的位置被固定。

您必須在您的內容包中使用填充頂部。

Answer 3

你的標題包含屬性position:fixed。因此，您應用於標題的邊距不會影響內容部分。

爲了解決這個問題，你需要給任何保證金或填充到contentwrap元素

Answer 4

當你設置爲position: fixed;的元素，你從「正常文檔流」將其刪除。想象一下你的網站是一條河，你從上面往下看。每個元素都是那條河中的一塊岩石。你應用於你的元素的任何margin就像是圍繞其中一塊岩石的力場。

當你在其中一塊岩石上設置position: fixed;時，你基本上將它從河中拉出來，使岩石本質上浮在半空中的河流上方。岩石和河水的流動對你來說仍然是一樣的，因爲你站在上面直視下面，但岩石不再與河流相互作用。

如果您已將margin應用於該岩石，那麼該岩石周圍的力場不再保留任何水分，因爲岩石在空中徘徊，這要歸功於它的position: fixed;屬性。因此，沒有水或其他岩石（其他元素）需要它們自行距離。你的岩石的力場（你的元素的邊際）推動稀薄的空氣，所以河流中的任何東西都不會受到影響。

但一張圖片勝過千言萬語，俗話說：

這個人是不是真的踢了比薩斜塔，但可以肯定的樣子吧！在這個例子中，包括比薩斜塔在內的圖片背景是你的頁面（或者你的'正常文檔流程'），並且該人是一個元素（或者來自我們最後一個例子的搖滾），其中position: fixed;被應用。

閱讀更多關於倉位屬性here和更多最新的here。解決這個問題

一種方法是你的頭設置爲top: 20px; z-index: 2;，以確保它的定位在頂部和z平面所有其他元素上面，然後給你的身體position: relative;和margin-top等於的高度頭（在這種情況下，52px）加上頭的top屬性的值。要增加標題和身體之間的距離，只需增加margin-top。這有時被稱爲「粘性頁眉/頁腳」方法。這裏有一個演示：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    background: #5A9910; 
 
    text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
    position: fixed; 
 
    top: 20px; 
 
    z-index: 2; 
 
    width: 100%; 
 
    background: #ffffff; 
 
    -webkit-box-shadow: 0 8px 6px -6px #333; 
 
    -moz-box-shadow: 0 8px 6px -6px #333; 
 
    box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
    width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
    width: 80%; 
 
    height: 1600px; 
 
    background: #ccc; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-top: 72px; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

附： position: fixed;是一個CSS屬性（準確地說屬性值對），而不是HTML屬性。