为什么我的保证金不能与 position: fixed 一起使用？答案

【问题标题】：Why isn't my margin working with position: fixed?为什么我的保证金不能与 position: fixed 一起使用？
【发布时间】：2016-01-12 23:16:36
【问题描述】：

JSFiddle Demo

我有一个用于标题的 div 和一个用于内容包装的 div。

由于某种原因，我不能在页眉底部设置强制内容换行向下推的边距。它只是完全忽略它，我不知道为什么。

有人知道这是怎么回事吗？当我取消职位时它不会这样做：固定;标题上的属性，但我希望它固定在顶部，因此滚动标题时始终可见。

希望有人可以解释为什么会发生这种情况，或者至少可以解释它的名称，以便我可以用谷歌搜索它。

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>

【问题讨论】：

标签： html css css-position

【解决方案1】：

当您将元素设置为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 属性。

【讨论】：

写一本关于 css 的书

【解决方案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/

【讨论】：

【解决方案3】：

边距不起作用，因为标题的位置是固定的。

你必须在你的 contentwrap 上使用 padding-top。

【讨论】：

【解决方案4】：

您的标题具有属性position:fixed。因此，您应用于页眉的边距不会影响内容部分。

要解决此问题，您需要为contentwrap 元素提供边距或内边距

【讨论】：

这不是真的。 contentwrap 元素不控制header。家长会：wrap

【解决方案5】：

与我合作的 CSS 是

#toaster-container {
  width: 99%;
  height: 98%;
  margin: 15px;
  position: fixed;
  top: 0;
}

但我不确定它是如何工作的，也不知道它是否仍然适用于缩放

还有一件事，上面的 css 使宽度为整个屏幕（100%）。也许这会破坏 top、bottom、right 和 left 属性的一些用法

【讨论】：