边际影响其他固定元素位置 [英] margin affects other fixed elements position
问题描述
我想在固定位置设置一个顶部标题，并在其下滚动内容，遇到一些陌生。如果我设置一个margin-top到内容div，边距也会影响标题，并将其下移，即使它设置为position：fixed。我发现一个解决方法，通过将内容div设置为position：relative和使用top：来抵消它相同的数量，但我发现很奇怪，非嵌套的div可以影响固定位置的元素，并想知道为什么会发生。
I wanted to set a top header in a fixed position and have content scroll underneath it and came across some strangeness. If I set a margin-top to the content div that margin would also affect the header and move it down even though it's set to position:fixed. I found a workaround by setting the content div to position:relative and using top: to offset it the same amount, but I find it strange that a non-nested div can affect a fixed-positioned element and would like to know why it happens.
我在Safari，Firefox和Chrome中得到同样的东西。在Opera中，边距将内容下推，并留下标题，这是我期望它做的，但与其他结果相比，也许是Opera的错误。我在说的话可以在这个JSFIDDLE 中看到（不要使用Opera！:)）。
I get the same thing in Safari, Firefox and Chrome. In Opera the margin pushes down the content and leaves the header in place, which is what I expected it to do, but compared to the other results maybe it's Opera that has it wrong. What I'm talking about can be in seen in this JSFIDDLE (don't use Opera! :) ).
以下是代码：
css：
body {
background:#FFD;
}
#header {
position:fixed;
height:15px;
width:100%;
text-align:center;
border-bottom:1mm dashed #7F7F7F;
background-color:#EEE;
}
#content {
width:90%;
margin-top:25px;
margin-left:auto;
margin-right:auto;
background-color:#E5E5FF;
border: 1px solid #000;
}
html：
<body>
<div id="header">
HEADER
</div>
<div id="content">
<p>Text1</p>
<p>Text2</p>
<p>Text3</p>
<p>Text4</p>
</div>
</body>
推荐答案
#header {
top: 0px !important;
}
这篇关于边际影响其他固定元素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
