Question

问题/观察 我的图片幻灯片动画框位于固定标题的正下方（这不是问题）。当我第一次加载页面时，固定标题和图片框之间没有叠加。但是，当我点击左右（下一个和前一个）箭头来更改图片时，图片的隐藏部分会显示并因此在动画期间与固定标题重叠，然后将其自身隐藏在固定标题后面一次更多。

如何停止此叠加行为，以便图片框始终位于标题后面？

该网站包含改编自以下来源的图片幻灯片动画：

Link for slide animation (html,css & js)

我的header.php文件具有以下结构

<header> 
<img  src="img/logo.png" width="400" height="120" alt="site logo"/>

            <ol >
                <li class="menu"> <a  href="index.php">Home</a> </li>   
                <li  class="menu"> <a href='about.php'>About This site </a> </li>   
                <li  class="menu"> <a href='learn.php'> Learn</a> </li>   
                <li  class="menu"> <a href='sponser.php'> Sponsor Me </a></li>     
            </ol>   
</header>

标头的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   
}

如果您不想关注该链接，我已复制并粘贴了以下我的改编标记和脚本。

HTML

在这里输入代码

  <?php include 'header.php'; ?>
  <!--photos-->    
  <div class='main'>

1/3＆lt; / div＆gt; - ＆gt; 字幕

2/3＆lt; / div＆gt; - ＆gt; 字幕

3/3＆lt; / div＆gt; - ＆gt; 字幕

❮ ❯

    <div style="text-align:center">
   <!-- span is an inline version of a div-->
<span class="bulletIndicators" onclick="currentSlide(1)"></span> 
<span class="bulletIndicators" onclick="currentSlide(1)"></span> 
<span class="bulletIndicators" onclick="currentSlide(1)"></span>

图片幻灯片的CSS

.mySlides {     高度：400像素;     宽度：100％;     溢出：隐藏;

} / *下一步＆amp;以前的按钮* / .previus，.next {     光标：指针;     位置：绝对;     上：300px;     填充：16px;     白颜色;     font-weight：bold;     font-size：18px;     溢出：隐藏;

/ *允许在给定时间范围内更改属性   Ease指定一种类型的转换，它开始和结束缓慢但速度加快   在时间表中间的某个地方。   * /     过渡：0.6s轻松;     border-radius：0 3px 3px 0; }

/ *将“下一个按钮”放在右边* / 。下一个 {     右：2px;     border-radius：3px 0 0 3px;     }

.previus {     左：2px;     border-radius：3px 0 0 3px;     }

/ *悬停时，添加黑色背景颜色，带一点透明* / .previus：hover，.next：hover {     background-color：rgba（0,0,0,0.8）; }

/ *点/子弹/指标* / .bulletIndicators {     光标：指针;     身高：13px;     宽度：13px;     background-color：#bbb;     border-radius：50％;     display：inline-block;     过渡：背景色0.6s轻松;

} / *：活动必须在：CSS定义中悬停（如果存在）才能生效！ * / .active，.bulletIndicators：hover {     background-color：＃717171; }

/ *使用webkit淡化动画 Webkit是一个带有一组规则集的块元素可用于在给定的设定时间内设置样式的关键帧 * / 。褪色 {     -webkit-animation-name：fade;     -webkit-animation-duration：1.5s;     动画名称：淡化;     动画持续时间：1.5s;     溢出：隐藏;

}

@ - webkit-keyframes fade {     来自{opacity：.4}     至{不透明度：1} } / *褪色alpha级别 - 请记住，如果框显示设置为无，那么您应该看到短暂的背景colout * / @keyframes fade {      来自{opacity：.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＆gt; slides.length）{slideIndex = 1;}   if（n＆lt; 1）{slideIndex = slides.length;}   for（i = 0; i＆lt; slides.length; i ++）{       slides [i] .style.display =“none”;   }   for（i = 0; i＆lt; dots.length; i ++）{       dots [i] .className = dots [i] .className.replace（“active”，“”）;   }   slide [slideIndex-1] .style.display =“block”;   点[slideIndex-1] .className + =“active”; }

Answer 1

我偶然发现了＆＃39; z-index＆＃39; 属性，同时查看了在css中移动框的不同方法。我把它设置为一个高值，在我的例子中我设置 z-index = 30;在标题选择器中。我不确定这是否适用于所有元素，因为我不知道它们各自的默认z-indices。

＆＃13;

header{
    background-color: white;
    color: white;
    position:fixed;
    top:0;
    border-bottom:1px solid #1e204c;
    display: block;
    width:100%; 
    z-index=30;
}

＆＃13;

Answer 2

尝试在要放在上面的对象上使用编号最大的z-index属性。前

header{
  z-index: 99;
}

网页标题

2 个答案: