Html 固定顶导航不'；t覆盖页面内容

我正在尝试创建一个顶部固定导航，它应该总是可见的，如果需要可以覆盖内容。然而，经过几次尝试之后，我想消除导航栏上的这种“透明”效果

@导入url（“https://fonts.googleapis.com/css?family=Montserrat+候补者：400800人；
.导航标题{
字体系列：“蒙特塞拉特交替”，无衬线；
字号：800；
字体大小：1.5rem；
}
#移动导航{
高度：3.8雷姆；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0 1rem；
盒影：0px 1px 10px黑色；
}
#移动导航i{
字体大小：3rem；
}
#内容{
边缘顶部：4rem；
}
#开始{
高度：50vh；
宽度：100%；
字体系列：“Poppins”，无衬线；
文本对齐：居中；
}
#开始h1{
位置：相对位置；
最高：25%；
字体大小：2.3rem；
保证金：0.1rem；
}
#信息{
高度：100vh；
宽度：100%；
字体系列：“Poppins”，无衬线；
保证金：0自动；
文本对齐：c；
}
#信息p{
边际：0.50px；
}
#信息h2{
文本对齐：居中；
}
.固定顶{
位置：固定；
排名：0；
}

一些标志
菜单
这是一个很棒的标题。
这是另一个标题。
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭调味品，一杯一杯。坐在阿梅特·波特蒂托·维利特的座位上，坐在马莱苏达·奥奇的座位上。Nam nec孕妇码头。普罗因·埃吉特·特里斯蒂克·夸姆。纳姆·波苏尔·马萨·马格纳。埃尼安康格
塞德·埃尼姆·坦普斯。在arcu设施中，所有设备均由拍卖人进行拍卖。两个人的生活都是美好的。利奥在奥纳麦格纳的征服者效率，在国际舞台上的生命。这是一个很好的例子。悬钩子
坐在酒后驾车，坐在路边。Sed posuere、lacus quis pellentesque interdum、dui nulla molestie est、vel调味品enim quam in ex.

如果您希望它不透明，您需要给它一个

背景色。而且，因为它在内容的其余部分之前，当它们重叠时，其余部分将在其之上。要将其置于上面，请给它
z-index:1

.fixed-top {
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 1
}


另一种方法是将滚动条从
主体
移动到
#内容
，这将不再允许它们重叠（在这种情况下，您不再需要上述内容）。它还具有不在菜单顶部呈现滚动条的优点：

#content {
  margin-top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

最后，您应该告诉顶部栏在其总
宽度计算中包含
填充
，以防止顶部栏超过文档的宽度：

#mobile-nav {
  box-sizing: border-box;
}

请参见此处：
我为导航添加了背景色，并设置了高于内容和标题的z索引


@导入url（“https://fonts.googleapis.com/css?family=Montserrat+候补者：400800人；
.导航标题{
字体系列：“蒙特塞拉特交替”，无衬线；
字号：800；
字体大小：1.5rem；
}
#移动导航{
高度：3.8雷姆；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0 1rem；
盒影：0px 1px 10px黑色；
背景色：#ffffff；
}
#移动导航i{
字体大小：3rem；
}
#内容{
边缘顶部：4rem；
}
#开始{
高度：50vh；
宽度：100%；
字体系列：“Poppins”，无衬线；
文本对齐：居中；
}
#开始h1{
位置：相对位置；
最高：25%；
字体大小：2.3rem；
保证金：0.1rem；
z指数：90；
}
#信息{
高度：100vh；
宽度：100%；
字体系列：“Poppins”，无衬线；
保证金：0自动；
文本对齐：c；
}
#信息p{
边际：0.50px；
}
#信息h2{
文本对齐：居中；
}
.固定顶{
位置：固定；
z指数：100；
排名：0；
}

一些标志
菜单
这是一个很棒的标题。
这是另一个标题。
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭调味品，一杯一杯。坐在阿梅特·波特蒂托·维利特的座位上，坐在马莱苏达·奥奇的座位上。Nam nec孕妇码头。普罗因·埃吉特·特里斯蒂克·夸姆。纳姆·波苏尔·马萨·马格纳。埃尼安康格
塞德·埃尼姆·坦普斯。在arcu设施中，所有设备均由拍卖人进行拍卖。两个人的生活都是美好的。利奥在奥纳麦格纳的征服者效率，在国际舞台上的生命。这是一个很好的例子。悬钩子
坐在酒后驾车，坐在路边。Sed posuere，lacus quis pellentesque interdum，dui nulla molestie est，vel调味品enim quam in ex.
我认为
背景色
属性是您需要的

您可以尝试在移动导航中添加以下行：

  background-color: white;
  z-index: 100; // or any other huge value