Html 当屏幕尺寸较小时，列重叠

我正在设置我的个人网站，我想在我的索引页中包含一个背景视频，然后使用引导设置我的网站标题和导航栏，在大屏幕中并排，在中到小屏幕中彼此并排，但是每当我缩小页面时，它们就会重叠

我相信问题要么在于视频大小，要么在于我文本的位置。无论何时我声明我的div的位置是相对的，视频都比屏幕大，允许侧面滚动，这是我不想要的，但是当我将它们设置为相对时，它们的行为是正确的。将其位置设置为“固定”可避免侧面滚动，但会导致重叠

body，html{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
宽度：100%；
身高：100%；
}
#家庭录像{
位置：固定；
保证金：0；
排名：0；
左：0；
最小宽度：100%；
宽度：100%；
最小高度：100%；
最大高度：100%；
框大小：边框框；
对象匹配：覆盖；
}
#上头屋{
颜色：绿色；
位置：固定；
}
#导航{
保证金：0；
位置：固定；
垫面：1%；
}
ul#nav{
垫面：1%；
字号：0；
框大小：边框框；
}
ul#nav li{
文本对齐：居中；
显示：内联块；
边界塌陷：塌陷；
右：1%；
}
ul#nav li a{
颜色：白色；
文本转换：大写；
文字装饰：无；
字体大小：calc（2vw+40%）；
}
ul#nav li:悬停{
背景色：rgba（255255,0.2）；
}
车身#导航：悬停{
显示：块；
}

主页|我的网站
我的网站

移除

位置：固定

。也许最终你的头球需要它，但我在3个不同的元素上看到了这条规则。这无疑是导致堆叠布局行为的原因。

在

行

div中添加了一个类

标题

，并添加到css下方

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

body，
html{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
宽度：100%；
身高：100%；
}
#家庭录像{
位置：固定；
保证金：0；
排名：0；
左：0；
最小宽度：100%；
宽度：100%；
最小高度：100%；
最大高度：100%；
框大小：边框框；
对象匹配：覆盖；
}
#上头屋{
颜色：绿色；
}
.标题{
位置：固定；
排名：0；
}
#导航{
保证金：0；
位置：固定；
垫面：1%；
}
ul#nav{
垫面：1%；
字号：0；
框大小：边框框；
}
ul#nav li{
文本对齐：居中；
显示：内联块；
边界塌陷：塌陷；
右：1%；
}
ul#nav li a{
颜色：黑色；
文本转换：大写；
文字装饰：无；
字体大小：calc（2vw+40%）；
}
ul#nav li:悬停{
背景色：rgba（255、255、255、0.2）；
}
车身#导航：悬停{
显示：块；
}
.身体{
边缘顶部：50px；
}

主页|我的网站
我的网站








Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又随着Aldus等桌面出版软件的发布而流行