Question

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

在我的浏览器中，两个div都从浏览器的左上角开始。

在firebug中，我将div设置为“display：block”，因此每个div元素应占用一行空格。为什么我看到它们堆叠在左上角？我怎样才能让它看起来很正常？

Answer 1

应用position: fixed时，元素会从页面的自然流中拉出。这会导致所有其他元素忽略该元素的位置。这就是静态div位于固定div之下的原因。

固定div的位置与父元素相关，在这种情况下为body。由于您未向其提供任何left top right bottom位置数据，因此它的行为与top: 0; left: 0;完全相同，恰好与您的位置相同静态div位于下方。

要解决此问题，我只需向padding-top添加相同数量的body，因为固定div为高。

您可以在此处详细了解：https://developer.mozilla.org/en/CSS/position

顺便说一句，div自然就像你给它display: block一样。事实上，这是它唯一的默认样式。

Answer 2

对于“position: fixed”：元素相对于浏览器窗口定位。这会覆盖div的display: block设置。因此，如果可以，请将fixed的定位更改为其他值，并遵守其他元素规则。

Css固定盒定位问题

2 个答案: