2

考虑以下代码：

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 的“向下”（参见小提琴）。

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

4

3 回答 3

4

您错过了顶部固定 div 中的前 0 名。

尝试这个

.top-fixed {
  position:fixed;
  top:0;
}
于 2012-12-22T08:24:25.727 回答
1

将 .bottom 元素的 CSS 更改为：

.bottom {
    position:relative;
    top:128px; #64+64
}
于 2012-12-22T08:23:27.423 回答
0

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

于 2012-12-22T08:31:09.950 回答