Css 位置：用垂直空间固定

我的立场有一个相当基本的问题：固定

以下是一个示例：

*{
保证金：0；
填充：0；
}
.导航{
宽度：100%；
高度：50px；
背景：#000；
位置：固定；
}
.内容{
背景：#ccc；
宽度：100%；
高度：5000px；
}

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
/>试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

当你说在后栏下方滚动时，听起来好像你想让内容从后栏下方开始。所以，在第二个div中添加一些填充来说明固定div的存在。
这样做了吗


我只是给出了“内容”DIV的相对位置和从顶部开始的y轴，y轴等于“导航”的高度，然后给了“导航”一个z索引，使其保持在“内容”的顶部

.nav {
 width: 100%;
 height: 50px;
 background: #000;
 position: fixed;
 z-index: 5;
}

.content {
 background: #ccc;
 width: 100%;
 height: 5000px;
 position: relative;
 top:50px;
}

您只需在.content div中添加一个等于.nav块大小的上边距+一些填充：

.content {
    margin-top: 60px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

这里有一种更灵活的方法来实现这一点，它不需要知道固定div的高度（尽管它的语义较少）

只需复制固定元素的标记即可。将复制对中第一个元素的
位置设置为
固定
，将第二个元素的
可见性设置为
隐藏
（同时确保第二个元素的
位置未设置或
相对
）。下面是一个例子：


*{
保证金：0；
填充：0；
}
.导航{
宽度：100%；
高度：50px；
背景：#000；
}
.fixed{位置：fixed}
.filler{可见性：隐藏}
.内容{
背景：#ccc；
宽度：100%；
}

首先

第二个

第三个

第四

第五次

第六

第七

Eigth

第九



















最后一次

您现在有几种解决方案。你选哪个取决于你想要什么。如果导航条完全覆盖了浏览器窗口的顶部，那么kdtong的边距顶部似乎是最好的。如果导航栏需要从内容区域获得一些背景效果，那么按照我的建议填充顶部似乎是最好的。我认为这是两个最直接的解决办法。