Html 覆盖内容并使其响应

我有三个框，它们稍微覆盖了背景图像，背景图像设置为视图端口的大小。这是向下滚动一点时的样子： 我通过在所有内容（背景图像除外）周围放置一个包装器，然后将其定位为绝对位置，实现了这一点。问题是，随着视口变长，所有内容开始向上移动到背景图像上。我只希望框稍微覆盖图像。但我也希望它能做出响应，而不必写下媒体质询的语气，让它保持在我喜欢的地方。你能给我一个更好的解决方案吗

#全宽{
位置：固定；
排名：0；
宽度：100%；
高度：30px；
z指数：100；
背景颜色：灰色；
}
#全速{
背景图片：url(https://images.unsplash.com/photo-1422360902398-0a91ff2c1a1f?dpr=1&auto=compress，format&fit=crop&w=2516&h=&q=80&cs=tinysrgb&crop=）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
高度：100vh；
}
.盒子{
保证金：2rem 0；
填充：1rem；
背景色：#ffffff；
-网络工具包盒阴影：-5px 5px 14px 0px rgba（0,0,0,0.6）；
-莫兹盒阴影：-5px 5px 14px 0px rgba（0,0,0,0.6）；
盒影：-5px 5px 14px 0px rgba（0,0,0,0.6）；
}
#内容包装器{
位置：绝对位置；
宽度：100%；
最高：80%；
}

航行
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子

另一部分
Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。奥克托·尼姆·维尔·尼塞尔·佩伦茨克蜗壳。帕托勒姆·伊普苏姆·多洛·希特，一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子

另一部分
Lorem ipsum dolor sit amet，是一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。奥克托·尼姆·维尔·尼塞尔·佩伦茨克蜗壳。帕托勒姆·伊普苏姆·多洛·希特，一位杰出的献身者。交通工具的前庭，三层。塞德·埃利芬德·埃利芬德·奥古斯。在tempus tortor的Maecenas。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子

而不是使用

位置：绝对

在

.content wrapper

上，使用

边距顶部

并将值设置为

-100px

。这将向上移动div并将其覆盖在上面的div上

#content_wrapper{
    width: 100%;
    margin-top: -100px;
}

---

而不是使用

位置：绝对

在

.content wrapper

上，使用

边距顶部

并将值设置为

-100px

。这将向上移动div并将其覆盖在上面的div上

#content_wrapper{
    width: 100%;
    margin-top: -100px;
}

---

不要使用定位，在该行上使用负片

页边距顶部

。不要使用定位，在该行上使用负片

页边距顶部

。