Problem/ Observation 我的图片幻灯片动画框位于固定 Headers 的正下方(这不是问题) . 当我第一次加载页面时，固定 Headers 和图片框之间没有叠加 . 但是，当我单击左右(下一个和上一个)箭头来更改图片时，图片的隐藏部分会显示，因此会在动画期间覆盖固定 Headers ，然后再次隐藏在固定 Headers 后面 .
How do i stop this overlay behaviour so that the picture box always stays behind the header?
该网站包括改编自以下来源的图片幻灯片动画：
我的header.php文件具有以下结构
标头的CSS
*{
padding:0;
text-decoration: none;
}
header{
background-color: white;
color: white;
position:fixed;
top:0;
border-bottom:1px solid #1e204c;
display: block;
width:100%;
}
ol {
display:inline-block;
}
a:link{
color:black;
}
.menu{
display:inline-block;
font-size:16px;
font-family: 'Roboto', sans-serif;
padding:0px 40px 0px 40px;
position:relative;
bottom:30px;
left:700px
}
如果您不想关注该链接，我已复制并粘贴了下面的 my adapted 标记和脚本 .
HTML
在此处输入代码
1/3 div> - > Headers
2/3 div> - > Headers
3/3 div> - > Headers
❮❮
用于图像幻灯片的CSS
.mySlides {身高：400px;宽度：100％;溢出：隐藏;
} / 下一个和上一个按钮 / .previus，.next {cursor：pointer;位置：绝对;上：300px;填充：16px;白颜色; font-weight：bold; font-size：18px;溢出：隐藏;
/ *允许在给定时间范围内改变属性Ease指定一种类型的转换，其开始和结束缓慢但在时间刻度的中间某处加速 . * /过渡：0.6s轻松; border-radius：0 3px 3px 0; }
/ 将“下一个按钮”放在右边 / .next {right：2px; border-radius：3px 0 0 3px; }
.previus {left：2px; border-radius：3px 0 0 3px; }
/ 在悬停时，添加一个带有一点透明的黑色背景颜色 / .previus：hover，.next：hover {background-color：rgba(0,0,0,0.8); }
/ 点/项目符号/指示符 / .bulletIndicators {cursor：pointer;身高：13px;宽度：13px; background-color：#bbb; border-radius：50％; display：inline-block;过渡：背景色0.6s轻松;
} / *：active必须在：在CSS定义中悬停(如果存在)才能生效！ * /.active，.bulletIndicators：hover {background-color：＃717171; }
/ 使用webkit Webkit的淡化动画是一个块元素，带有一组名为Keyframes的规则集，可用于在给定的设定时间内设置样式 / .fade {-webkit-animation-name：fade; -webkit-animation-duration：1.5s;动画名称：淡化;动画持续时间：1.5s;溢出：隐藏;
}
@ -webkit-keyframes fade {from {opacity：.4} to {opacity：1}} / * fading alpha level-请记住，如果框显示设置为none，那么你应该看到背景colout简短* / @ keyframes fade {从{不透明度：.4}到{不透明度：1}}
Java脚本
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n){showSlides(slideIndex = n); }
function currentSlide(n){showSlides(slideIndex = n); }
function showSlides(n){var i; var slides = document.getElementsByClassName(“mySlides”); var dots = document.getElementsByClassName(“bulletIndicators”); if(n> slides.length)if(n <1) for(i = 0; i
