Javascript 英雄图像幻灯片与固定导航栏重叠

我正在为一家小公司从头开始建立一个网站，以提高我的html/css/js技能，因此我希望避免使用任何类似bootstrap的框架

讨论中的站点有一个固定的导航栏和一个英雄图像滑块，但我遇到了一个问题，英雄图像在每次更改时都会临时与导航栏重叠。我在css中尝试了一些方法，但到目前为止，我无法确定问题所在，您可以在这里看到：

var slideIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“headerimg”）；
对于（i=0；ix.length）{slideIndex=1}
x[slideIndex-1].style.display=“flex”；
设置超时（旋转木马，5000）；
}

正文{
保证金：自动0；
/*背景色：rgb（231232233）*/
字体系列：“开放式Sans”，无衬线；
}
h1、h2、h3、h4、h5、h6{
字体系列：“Lato”，无衬线；
}
h1{
字号：2em；
}
导航{高度：10vh；}
mainnav先生{
列表样式：无；
显示器：flex；
保证金：0；
背景色：白色；
字号：1em；
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
证明内容：柔性端；
/*不透明度：0.5*/
}
纳维滕先生{
垫面：2%；
垫底：2%；
右：6%；
左：1%；
过渡：背景色0.3s线性；
}
.navitem:悬停{
背景色：红色；
}
纳维特先生{
过渡：颜色0.3s线性；
文字装饰：无；
颜色：黑色；
文本对齐：居中；
}
.navitem a:悬停{颜色：白色；}
#标语{
文本对齐：居中；
字体系列：“Lato”；
字号：2em；
利润底部：1%；
颜色：黑色；
背景色：#ededed；
垫底：0.5%；
垫面：0.2%；
边框顶部：3件纯红；
}
.头衔{
右边距：自动；
填充：1%6%1%1%；
页边顶部：自动；
页边距底部：自动；
}
.标题img{
高度：50px；
右边填充：10px；
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.2}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.2}
到{opacity:1}
}
海德里姆先生{
最大高度：400px；
宽度：100%；
}

测试

测试测试






LOREM IPSUM

只需像这样在.mainnav上设置z-index属性。 您可以查看此网站的z索引说明：

var slideIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“headerimg”）；
对于（i=0；ix.length）{slideIndex=1}
x[slideIndex-1].style.display=“flex”；
设置超时（旋转木马，5000）；
}

正文{
保证金：自动0；
/*背景色：rgb（231232233）*/
字体系列：“开放式Sans”，无衬线；
}
h1、h2、h3、h4、h5、h6{
字体系列：“Lato”，无衬线；
}
h1{
字号：2em；
}
导航{高度：10vh；}
mainnav先生{
列表样式：无；
显示器：flex；
保证金：0；
背景色：白色；
字号：1em；
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
证明内容：柔性端；
/*不透明度：0.5*/
z-index:1；/*添加z-index以强制始终在顶部，因为重叠元素不具有此属性*/
}
纳维滕先生{
垫面：2%；
垫底：2%；
右：6%；
左：1%；
过渡：背景色0.3s线性；
}
.navitem:悬停{
背景色：红色；
}
纳维特先生{
过渡：颜色0.3s线性；
文字装饰：无；
颜色：黑色；
文本对齐：居中；
}
.navitem a:悬停{颜色：白色；}
#标语{
文本对齐：居中；
字体系列：“Lato”；
字号：2em；
利润底部：1%；
颜色：黑色；
背景色：#ededed；
垫底：0.5%；
垫面：0.2%；
边框顶部：3件纯红；
}
.头衔{
右边距：自动；
填充：1%6%1%1%；
页边顶部：自动；
页边距底部：自动；
}
.标题img{
高度：50px；
右边填充：10px；
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.2}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.2}
到{opacity:1}
}
海德里姆先生{
最大高度：400px；
宽度：100%；
}

测试

测试测试






LOREM IPSUM

之所以发生这种情况，是因为“位置固定”实质上从文档流中删除了元素，导致其下方的项目向上移动

---

您需要说明固定导航先前占用的空间。赋予标题元素padding top:56px；或身体元素填充顶部：56px；解决问题。

感谢您解释为什么会发生这种情况（有意义！），但是添加填充只能在页面处于起始位置时解决问题-如果向下滚动，使固定标题与英雄图像重叠，则图像更改时，它仍会在页面内外“闪烁”，除非我遗漏了什么。我试着在身体和.headerimg类中添加填充物。啊，明白了。在组合中填充z-index修复程序应该可以工作。这非常有效，我将查看w3schools页面以了解有关此属性的更多信息。谢谢！