为什么我的保证金不符合头寸：固定？

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属性。