奇怪的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固定行爲

回答

相關問題