head {top 0px}

Question

在我的body代码中，我有一个header和div#content元素。我的目标是创建一个固定标头，然后使用content属性从content元素下面推出margin-top元素。但是，当我执行此操作时，header也向下移动，就像它已加入content一样。我通过向position: absolute添加content来解决此问题。麻烦是我无法向自己解释为什么它有效。它刚刚做到了。我在Ubuntu上使用Firefox。

这是header css：

header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF; 
width: 100%;
z-index: 1;

}

这是content css：

#content {
    position: absolute;
    margin-top: 100px;

}

这是codepen。

请教我一个人：）

Answer 1

错误的语法 - 在第3行使用,代替;

header {
position: fixed;
top: 0px,
left: 0px;

所以属性top和left被破坏了。

Answer 2

几点意见：

position: absolute;没有真的修复它。查看此codepen进行演示。请注意我在div之后添加的相当数量的内容以及它们如何正确显示？这是因为：
你的第一个css元素上有拼写错误。这是一个展示修复程序的codepen：http://codepen.io/anon/pen/YwvBJy您写了,而不是;。您没有关闭top: ;属性，因此您的浏览器尝试使用#content margin-top修复此问题。

Answer 3

您在这里使用了逗号而不是分号

head {top 0px}

请使用smemicolon替换逗号而不是不需要位置：绝对。

具有固定位置属性的标头响应给予内容

3 个答案:

head {top 0px}