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

Question

我有一个 div 用于 header 和一个 div 用于内容包装。

出于某种原因，我无法在 header 的底部设置空白，迫使内容换行向下推。它只是完全忽略它，我不知道为什么。

有人知道这是怎么回事吗？当我取消职位时，它不会这样做：固定； header 上的属性，但我希望它固定在顶部，以便在滚动时始终显示 header。

希望有人能解释为什么会发生这种情况，或者至少解释它的名称，这样我就可以 google 它了。

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

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

您必须在内容包装上使用 padding-top。

Answer 2

你的 header 有属性 position:fixed。因此，您应用于 header 的边距不会影响内容部分。

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

Answer 3

将元素设置为 position: fixed; 时，会将其从 "normal document flow" 中删除。想象您的网站是一条河流，您正从上方俯视它。每个元素都是那条河中的一块岩石。您应用于元素的任何 margin 就像其中一块岩石周围的力场。

当您在其中一块岩石上设置 position: fixed; 时，实际上是将其从河流中拉出，这样岩石实际上就漂浮在河流上方的半空中。岩石和河流的水流对你来说仍然是一样的，因为你在上面直向下看，但岩石不再与河流相互作用。

如果您已将 margin 应用于该岩石，则岩石周围的力场将不再使任何水远离它，因为由于其 position: fixed; [，岩石会悬停在半空中。 =66=]。所以它不需要与水或其他岩石（其他元素）保持距离。你的岩石力场（你的元素的边缘）正在推动稀薄的空气，所以河流中的任何东西都不会受到影响。

但一图胜千言，俗话说：

这个人不是真的踢翻了比萨斜塔，但看起来确实像！在这个例子中，图片的背景，包括比萨斜塔，是你的页面（或你的'normal document flow'），而人是一个元素（或我们上一个例子中的岩石）position: fixed; 应用。

详细了解职位属性 here and, more up-to-date, here。

解决此问题的一种方法是将您的 header 设置为 top: 20px; z-index: 2; 以确保它位于 z-plane 上所有其他元素的顶部和上方，然后将您的body position: relative; 和 margin-top 等于 header 的高度（在本例中为 52px）加上 header 的值' s top 属性。要增加 header 和 body 之间的 space，只需增加 margin-top 数量。这有时称为 "sticky header/footer" 方法。这是一个演示：

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>

P.S。 position: fixed; 是 CSS 属性（准确地说是 property-value 对），而不是 HTML 属性。

Answer 4

我认为你必须明确声明固定的位置 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;
}

检查这个 fiddle 如果工作正常，你需要： https://jsfiddle.net/0cmvg92m/3/

Answer 5

与我一起工作的 css 是

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

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

还有一件事，上面css使宽度为整个屏幕（100%）。可能会破坏顶部、底部、右侧和左侧属性的某些用法

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

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

html

css

css-position