在CSS中的固定位置和覆蓋位置

如何獲得固定的位置，並且不會疊加在另一個div的頂部？在CSS中的固定位置和覆蓋位置

例如：

<html> 
<body> 
<div style="background-color:black; height:200px;"> 
</div> 
<div style="background-color:blue; height:400px;"> 
</div> 
</body> 
</html>

我要的是頂級的div總是在頂部，但不要擋住底部的DIV的任何部分。例如：http://twitter.github.com/bootstrap/

頂部的黑色菜單始終保留在頂部，而不會遮擋任何其他div的視圖。我檢查了該網站上的topbar css，並將其插入到我自己的測試文檔中，但無法達到預期的效果。除了「position：fixed」之外，我還需要做些什麼？

來源

2011-12-15 Jay Sun

您示例中的頂部欄在開始滾動時確實開始模糊了事物。然而，就你的情況而言，我認爲你應該在你的黑色條的高度上添加一個填充到你的body的頂部。這樣，一切都被壓低了，它不會涵蓋其他任何東西。

來源

2011-12-15 21:24:09

正確。在發佈的鏈接`header .inner`中有一個45px的頂部填充。 – ptriek 2011-12-15 21:25:43

這裏是它如何能夠做到

http://jsfiddle.net/fk3wY/3/

所以basicly一個簡單的例子：

body { 
    padding-top:40px; 
} 
#top { 
    position:fixed; 
    top:0px; 
    left:0px; 
    height:40px; 
    width:100%; 
}

來源

2011-12-15 21:30:41 BjarkeCK

這兩個答案都很好，但我給他的支票是因爲他先發布。儘管如此，仍然投票支持你。 – 2011-12-15 21:42:41

在CSS中的固定位置和覆蓋位置

回答

相關問題