Html 如何停止div.content与标题重叠？

.myHeader{
显示：块；
位置：固定；
高度：自动；
宽度：100%；
z指数：100；
}    
h1{
字体大小：39px；
颜色：rgba（255、255、255、0.842）；
/*边框底部：2个实心#f6f4f84d*/
文本对齐：居中；
边际上限：0；
填充：15px 18px；
}
保险商实验室{
列表样式类型：无；
位置：固定；
顶部：80px；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.内容{
显示：块；
颜色：白色；
}

外刊





什么东西

如果您将页眉固定在页面顶部，它将与未固定的内容重叠，您可以通过设置内容的顶部间距来避免这种情况

我会试着写一段代码给你看

在下面的示例中，您将看到一个div与固定头重叠，第二个div将位于其下方，希望有帮助

在这里，你可以看到你的身体开始在标题下，这是很好的，如果你想你的标题总是固定的

正文{
边缘顶部：100px；
}
标题{
宽度：75%；
背景色：红色；
位置：固定；
排名：0；
高度：100px；
}
第一组{
宽度：100%；
背景颜色：蓝色；
高度：100px；
}
第二组{
宽度：50%；
背景颜色：黄色；
高度：100px；
}

你的头球在这里
你网站的其他部分都在这里
你网站的其他部分都在这里

解决方案1:

为页眉设置固定高度，并添加具有相同值的“正文”边距：

例如：

body {
    margin-top: 200px;
}
.myHeader{
    height: 200px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}   

解决方案2:
1.从ul选择器中删除“位置”和“顶部”属性。
2.将“top”和“left”属性添加到“.myHeader”类中。
3.添加jQuery脚本以动态设置页面的上边距

<style>
ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.myHeader{
    display: block;
    position: fixed;
    height: auto;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}  
</style>

<script>
    $(document).ready(() => {
        let headerHeight = $('.myHeader').height();
        $('body').css({
            'margin-top': headerHeight + 'px'
        });
    });
</script>

保险商实验室{
列表样式类型：无；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
.myHeader{
显示：块；
位置：固定；
高度：自动；
排名：0；
左：0；
宽度：100%；
z指数：100；
}  
$（文档）.ready（（）=>{
让headerHeight=$（'.myHeader'）.height（）；
$（'body'）.css({
“页边距顶部”：页眉高度+“px”
});
});

非常感谢Christoph！我使用了解决方案一与css，它的工作相当好！如果我想在我的页面中添加更多的div，然后向下滚动时，不要让它们重叠，你知道该怎么做吗？我需要使用css的粘性位置吗？不用担心。只需将标题的“background color”CSS属性设置为#fff，即可防止背景内容出现在标题中/标题上。如果您想让页面更下方的其他div与标题合并，可以使用“position:sticky”和“top:200px”（来自我的示例）。然后，当用户滚动时，粘滞div将附加到标题上。