为什么我的margin在使用position: fixed后不起作用？

Question

JSFiddle演示

我有一个头部的

和一个内容块的

。

由于某种原因，我不能在头部的底部设置边距以强制推下内容块。它完全忽略了它，我不知道为什么。

有人知道发生了什么吗？如果我取消头部的 position: fixed; 属性，则不会出现这种情况，但我希望它固定在顶部，以便滚动时始终能看到头部。

希望有人可以解释为什么会发生这种情况，或者至少告诉我它被称为什么，这样我可以搜索一下。

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>

- dan

Answer 1

当你将一个元素设置为position: fixed;时，它会从“正常文档流”中移除。想象一下你的网站像一条河流，你从上面俯视它。每个元素就像河流中的石头。你应用到元素上的任何margin都像是一道围绕着这些石头的障壁。

当你在其中一个石头上设置position: fixed;时，本质上，你将它从河里拔起来，以至于这块石头悬浮在空中，与河流的水流看起来一样，因为你从上面直视，但是这块石头不再与河流相互作用。

如果你已经给这块石头应用了margin，那么环绕这块石头的障壁不再使任何水远离它，因为这块石头凭借其position: fixed;属性悬浮在空中。所以没有水或者其他石头（其他元素）需要与它保持距离。你的石头周围的障壁（你的元素的margin）在与空气对抗，所以河流中的任何东西都不会受到影响。

但是，俗话说得好：“一图胜千言”：

这个人在现实中没有真的踢倒比萨斜塔，但看起来像！在此示例中，图片的背景，包括比萨斜塔，是你的页面（或“正常文档流”），而这个人是一个带有应用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 属性。

- TylerH

---

写一本关于CSS的书。 - Illia Kuzma

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

如果您需要，可以查看此 jsfiddle ，以确定它是否符合您的要求： https://jsfiddle.net/0cmvg92m/3/

- cesare

Answer 3

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

您必须在 contentwrap 上使用 padding-top。

- max

Answer 4

你的头部有属性 position:fixed。因此，你对头部应用的边距不会影响内容区域。

为了解决这个问题，你需要给 contentwrap 元素添加 margin 或 padding。

- sunitj

---

这不是真的。contentwrap元素并不控制header。它的父元素wrap才控制。 - Davis

Answer 5

对我有效的CSS是：

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

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

还有一件事，上述CSS将宽度设置为整个屏幕（100%）。这可能会破坏某些使用顶部、底部、右侧和左侧属性的情况。

- Basheer AL-MOMANI