奇怪的CSS固定行为

我有这个超级简单的代码：奇怪的CSS固定行为

<body> 
<div style="position:fixed; width: 100%; height: 40px; background: #333"></div> 

<div style='margin-top:40px; border: 1px solid green'> 
Some contents!<br>Some contents!<br>Some contents!<br> 
</div> 

</body>

但不知何故固定div有40像素的保证金和重叠第二个div！请有人指出我在这里错过了什么？

JS小提琴：http://jsfiddle.net/hoangkhanh/zHkkH/

谢谢！

来源

2013-09-27 Khanh Nguyen

心灵解释downvote？ –

在这里，你有'位置：固定'，并在小提琴你有'位置：绝对'？ – Vucko

你有一个position:absolute设置顶部div没有top:0位置设置。试试这个：

<body> 
<div style="position:absolute; width: 100%; height: 40px; background: #333; top: 0"></div> 

<div style='margin-top:40px; border: 1px solid green'> 
Some contents!<br>Some contents!<br>Some contents!<br> 
</div> 

</body>

Fiddle

来源

2013-09-27 13:28:15 webnoob

添加顶部，左，右，或底部的CSS属性为固定股利。

例如

{ 
    top: 0; /*Fixes it to the top*/ 
}

来源

2013-09-27 13:28:22 miguelarcilla

奇怪的CSS固定行为

回答

相关问题