Question

请考虑以下代码：

div {
    width:100%;
    height:64px;
    border:1px solid #000;
}

.top-fixed {
    position:fixed;
}

.middle-fixed {
    position:fixed;
    top:64px;
}

.bottom {
    margin-top:128px; #64+64
}

<html>
    <head></head>
    <body>
        <div class="top-fixed">Top Fixed</div>
        <div class="middle-fixed">Middle Fixed</div>
        <div class="bottom">Bottom</div>
    </body>
</html>

对于div.bottom，我使用margin-top属性，以便它不与最顶层的div重叠。但它也带来了div.top-fixed'down'与自己（见小提琴）。

我该如何纠正？一种方法是使用div.bottom的padding-top属性而不是margin-top，但这听起来并不优雅。

Answer 1

你在顶级固定的div中错过了前0名。

试试这个

.top-fixed {
  position:fixed;
  top:0;
}

Answer 2

将.bottom元素的CSS更改为：

.bottom {
    position:relative;
    top:128px; #64+64
}

Answer 3

将top:0;添加到.top-fixed类。

最顶层的“固定”位置div与非位置div一起移动

3 个答案: