我想在一个固定的位置设置一个顶部标题,并在其下面滚动内容并遇到一些陌生感.如果我设置一个margin-top到内容div,那么边距也会影响标题并将其向下移动,即使它设置为position:fixed.我找到了一个解决方法,通过将内容div设置为position:relative并使用top:来抵消它相同的数量,但我发现很奇怪,非嵌套div可以影响固定位置的元素,并想知道它为什么会发生.
我在Safari,Firefox和Chrome中也得到了同样的东西.在Opera中,边缘按下内容并将标题留在原位,这正是我所期望的,但与其他结果相比,可能是Opera出错了.我正在谈论的内容可以在这个JSFIDDLE中看到(不要使用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>
小智 9
#header {
top: 0px !important;
}