Question

我有以下简单的html

<body>
    <div style="position:fixed;width:100%;top:0;left:0;height:45px; background-color:silver">
        top
    </div>

    <div style="width:600px;background-color:yellow;margin:auto">
        bottom
    </div>
</body>

当我在浏览器中运行页面时，银色DIV覆盖了黄色的DIV。我想看到黄色的，正好在银色下面。我该怎么改变它？

Answer 1

那是因为你有一个固定的位置。这需要文档流程之外的银色div。

在你的身体上添加一个填充物，这将使你的黄色div再次出现。

<body style="padding-top: 45px;">
    <div style="position:fixed;width:100%;top:0;left:0;height:45px; background-color:silver">
        top
    </div>

    <div style="width:600px;background-color:yellow;margin:auto">
        bottom
    </div>
</body>

Answer 2

由于position: fixed元素被取消流量，其他元素将自己定位，好像position: fixed不在那里，所以我的情况下你的第二个需要一个等于高度的边距第一

<body>
    <div style="position:fixed;width:100%;top:0;left:0;height:45px; background-color:silver">
        top
    </div>

    <div style="width:600px;background-color:yellow;margin: 45px auto 0 auto">
        bottom
    </div>
</body>

DIV由之前的DIV涵盖

2 个答案: