Html 为什么我的保证金不适用于持仓：固定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33132586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't my margin working with position: fixed?
提问by dan
I have a div for a header and a div for a content wrap.
我有一个用于标题的 div 和一个用于内容包装的 div。
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>采纳答案by cesare
i think you have to explictly declare the position of fixed div.
我认为您必须明确声明固定 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;
}
and assign margin at the content div
并在内容 div 处分配边距
div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}
check this fiddle if works like you need: https://jsfiddle.net/0cmvg92m/3/
如果您需要，请检查此小提琴：https: //jsfiddle.net/0cmvg92m/3/
回答by TylerH
When you set an element to position: fixed;, you remove it from the "normal document flow". Imagine your website is a river, and you're looking down at it from above. Each element is a rock in that river. Any marginyou've applied to your elements is like a force field around one of those rocks.
将元素设置为 时position: fixed;，会将其从“正常文档流”中删除。想象一下您的网站是一条河流，您从上面俯视它。每个元素都是那条河中的一块石头。margin您应用到元素上的任何内容都像是围绕其中一块岩石的力场。
When you set position: fixed;on one of those rocks, you're essentially pulling it up out of the river so that the rock, in essence, is floating above the river in midair. The rock and the river's flow of water will still look the same to you, because you're up above looking straight down, but the rock is no longer interacting with the river's flow.
当你position: fixed;在其中一块岩石上设置时，你实际上是将它从河中拉出来，这样岩石本质上就漂浮在半空中的河上。岩石和河流的水流在您看来仍然相同，因为您在上方俯视，但岩石不再与河流的流动相互作用。
If you had applied marginto that rock, that force field around the rock is no longer keeping any water away from it, because the rock is hovering in midair thanks to its position: fixed;property. So there's no water or other rocks (other elements) from which it needs to distance itself. Your rock's force field (your element's margin) is pushing against thin air, so nothing in the river will be affected.
如果你已经应用margin到那块岩石上，那么岩石周围的力场就不再让水远离它了，因为这块岩石由于它的position: fixed;特性而悬停在半空中。因此，它不需要与水或其他岩石（其他元素）保持距离。您的岩石的力场（您元素的边缘）正在推动稀薄的空气，因此河流中的任何东西都不会受到影响。
But a picture is worth a thousand words, as the saying goes:
但一张图胜过千言，俗话说：
This man is not really kicking over the Leaning Tower of Pisa, but it sure looks like it! In this example, the background of the picture, including the Leaning Tower of Pisa, is your page (or your 'normal document flow'), and the man is an element (or the rock from our last example) with position: fixed;applied.
这个人不是真的在踢比萨斜塔，但看起来确实很像！在这个例子中，图片的背景，包括比萨斜塔，是你的页面（或者你的“正常文档流”），而 man 是一个元素（或者我们上一个例子中的岩石）和position: fixed;应用。
Read more about the position property hereand, more up-to-date, here.
在此处阅读有关 position 属性的更多信息，在此处阅读更多最新信息。
One way to fix this is to set your header to top: 20px; z-index: 2;to make sure it's positioned at the top and above every other element on the z-plane, and then give your body position: relative;and a margin-topequal to the height of the header (in this case, 52px) plus the value of the header's topproperty. To increase the space between your header and your body, just increase the margin-topamount. This is sometimes called the "sticky header/footer" approach. Here's a demo:
解决此问题的一种方法是将标题设置top: 20px; z-index: 2;为确保它位于 z 平面上每个其他元素的顶部和上方，然后给您的 bodyposition: 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>P.S. position: fixed;is a CSS property (a property-value pair, to be precise), not an HTML attribute.
PSposition: fixed;是一个 CSS 属性（准确地说是一个属性-值对），而不是一个 HTML 属性。
回答by max
Margin does not work because position of the header is fixed.
边距不起作用，因为标题的位置是固定的。
You have to use padding-top on your contentwrap.
您必须在 contentwrap 上使用 padding-top。
回答by sunitj
Your header have property position:fixed. Hence the margin that you apply to header does not impact the content section.
你的标题有财产position:fixed。因此，您应用于标题的边距不会影响内容部分。
To solve this problem, you need to give either margin or padding to the contentwrapelement
要解决此问题，您需要为contentwrap元素提供边距或填充
回答by Basheer AL-MOMANI
the css that worked with me is
与我一起工作的 css 是
#toaster-container {
width: 99%;
height: 98%;
margin: 15px;
position: fixed;
top: 0;
}
but I'm not sure how that worked, and don't know if it will still work with zooming
但我不确定它是如何工作的，也不知道它是否仍然适用于缩放
one more thing, the above css make width as the whole screen (100%). maybe that break some usages of top, bottom, right and left properties
还有一件事，上面的css使宽度成为整个屏幕（100％）。也许这打破了顶部、底部、右侧和左侧属性的一些用法
