Why isn't my margin working with position: fixed?

Question

JSFiddle Demo

I have a div for a header and a div for a content wrap.

For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why.

Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view.

Hoping someone can explain why this happens or at least what it is called so I can google it.

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;
	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;
}

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

Answer 1

将元素设置为时position: fixed;,将其从"普通文档流"中删除.想象一下,你的网站是一条河流,你从上面俯视它.每个元素都是那条河中的一块岩石.margin你应用于你的元素的任何东西就像围绕其中一块岩石的力场.

当你踏上position: fixed;其中一块岩石时,你基本上将它从河里拉出来,以便岩石本质上漂浮在半空中的河上.岩石和河流的水流对你来说看起来仍然是一样的,因为你在俯视下方,但岩石不再与河流相互作用.

如果你已经应用于margin那块岩石,那么岩石周围的力场就不再让它远离它,因为岩石因其position: fixed;属性而在半空中盘旋.因此,没有水或其他岩石(其他元素)需要与之保持距离.你的岩石力场(你的元素的边缘)正在推动空气稀薄,所以河流中的任何东西都不会受到影响.

但是一张图片胜过千言万语,俗话说:

这个男人并没有真正踢过比萨斜塔,但看起来确实如此!在这个例子中,图片的背景,包括比萨斜塔,是你的页面(或你的'普通文档流'),而man是一个元素(或者我们上一个例子中的岩石)并且position: fixed;应用了.

在这里阅读更多关于位置属性的信息,以及更新的信息.

解决此问题的一种方法是将标题设置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>

PS position: fixed;是CSS属性(确切地说是属性 - 值对),而不是HTML属性.

Answer 2

我认为你必须明确宣布固定div的位置.

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;
}

并在内容div处分配保证金

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

如果您需要的话,请检查这个小提琴:https: //jsfiddle.net/0cmvg92m/3/