css - 最顶层 'fixed' 位置 div 与非位置 div 一起移动

标签 css html css-position

考虑以下代码:

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' 本身(参见 fiddle )。

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

最佳答案

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

试试这个

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

关于css - 最顶层 'fixed' 位置 div 与非位置 div 一起移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14001219/

相关文章:

javascript - 在 div 中包装 bootstrap 完整 slider 使其不起作用

jquery - 无法设置切换按钮效果

html - 导航栏不固定

css - 具有相对定位元素的 Z-index

javascript - 具有绝对位置的CSS旋转

html - div高度自动增加

HTML 数字输入删除小数点?

Java 相当于 PHP Simple HTML DOM Parser

html - HTML5 中的标题顺序

html - 如何使用箭头使图像填充 div?