Css固定盒定位問題

<html> 
    <body> 
     <div class="fixed-top-bar" style="position:fixed"></div> 
     <div class="content" style="position:static"></div> 
    </body> 
</html>

在我的瀏覽器中，兩個div都從瀏覽器的左上角開始。Css固定盒定位問題

在firebug中，我將div設置爲「display：block」，因此每個div元素都應該佔用一行空格。爲什麼我看到它們堆放在左上角？我怎樣才能讓它看起來很正常？

來源

2012-02-08 user469652

當應用position: fixed時，該元素會被拉出頁面的自然流。這會導致所有其他元素忽略該元素的位置。這就是爲什麼靜態div低於固定div。

固定的div的位置涉及父元素，在這種情況下是body。既然你沒有給它lefttoprightbottom位置數據，它就像top: 0; left: 0;這恰好是你的靜態div位於下面的確切相同的位置。

要解決這個問題，我只需將相同數量的padding-top添加到body，因爲固定的div很高。

你可以閱讀更多關於此這裏：https://developer.mozilla.org/en/CSS/position

順便說一句，一個div自然的行爲，如果你想給它display: block。事實上，這是它唯一的默認樣式。

來源

2012-02-08 09:08:08

太棒了，謝謝潘斯普的回答。 – user469652 2012-02-08 09:49:42

對於「position: fixed」：元素相對於瀏覽器窗口定位。這是覆蓋您的div的display: block設置。所以如果可以的話，請將定位從fixed更改爲其他值，並遵守其他元素規則。

來源

2012-02-08 09:09:34 pansp

Css固定盒定位問題

回答

相關問題