带有网站标题的 java 脚本图片幻灯片动画的不需要的覆盖

Posted 2023-02-22

【中文标题】带有网站标题的 java 脚本图片幻灯片动画的不需要的覆盖

【英文标题】：Unwanted overlay of java script picture slide animation with website header

【发布时间】：2017-12-23 08:34:16

【问题描述】：

问题/观察 我的图片幻灯片动画框放置在固定标题的正下方（这不是问题）。当我第一次加载页面时，固定标题和图片框之间没有覆盖。但是，当我单击左右（下一个和上一个）箭头来更改图片时，图片的隐藏部分会显示并在动画期间与固定标题重叠，然后再次隐藏在固定标题后面.

如何停止这种叠加行为，使图片框始终位于标题后面？

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

Link for slide animation (html,css & js)

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

<header> 
<img  src="img/logo.png"   />

            <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

--> 标题

2 / 3

【参考方案1】：

我在查看在 css 中移动框的不同方法时偶然发现了 'z-index' 属性。我将其设置为较高的值，在我的情况下，我设置了 z-index=30;在标题选择器中。我不确定这是否适用于所有元素，因为我不知道它们各自的默认 z 索引。

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

【参考方案2】：

尝试在要放在上面的对象上使用具有最高数字的 z-index 属性。 例如

header
  z-index: 99;