Question

我正在制作一个网站，我希望在页面上有一个幻灯片。但是，由于幻灯片放映整个页面，我的标题和菜单会将itselv置于其下方。我尝试使用链接创建一个div，您可以按“返回”，返回索引页面，但无法单击该链接，只有当幻灯片从一个图像更改为另一个图像时才能看到该链接。幻灯片上的z-index为1，我尝试将其设为2，“按钮”为1，反之亦然。不过，我无法想出一个解决方案。我真的希望有人能够帮助解决这个问题。提前致谢。

我没有发布任何代码，但如果这是优先的，请问！

CSS

.h1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 40pt; }
.m1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 18pt; }
.m2 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 15pt; }
.m3 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 30pt; }


body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.index-bg {
    background-image: url(bild/1.png);
}

.kontakt-bg {
    background-image: url(bild/2.png);
}

.porto-bg {
    background-color: none;
}

#header {
    height: 40px;
    width: 100%;
    text-align: center;
    position: center;
}

#menu {
    height: 20px;
    width: 100%;
    text-align: center;
}

ul.menli {
    list-style-type: none;
}

ul.menli li {
    display: inline-block;
    margin: 0px 50px;
}

ul.menli li a {
    text-decoration: none;
    color: #fff;
}

ul.menli li a:hover {
    text-decoration: underline;
}

#main-left {
    height: 500px;
    width: 50%;
    float: left;
    margin-top: 100px;
    margin-left: 395px;
    background-color: none;

}

ul.mainli {
    list-style-type: none;
}

ul.mainli li{
    margin-top: 10px;
}

ul.mainli li a {
    color: #fff;
}

#main-right {
    height: 500px;
    width: 50%;
    float: right;
    margin-top: 10px;
    background-color: none;
    margin-top: 10px;
}

我添加的按钮

#button {
    float: right;
    padding-right: 60px;
    z-index: 2;

}
a {
    color: pink;
}

幻灯片：

.slideshow {
  list-style: none;
  z-index: 1;

}



.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;

}

.no-cssanimations .slideshow li span { 
    opacity: 1; 
}

@-webkit-keyframes

imageAnimation { 
    0% 
    {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    12.5% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    }
    25% {
    opacity: 1;
    }
    37.5% {
    opacity: 0;
    }
    100% {
    opacity: 0;
    }
}

@-moz-keyframes
    imageAnimation { 
    0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }
        12.5% {
        opacity: 1;
        -moz-animation-timing-function: ease-out;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}
@keyframes
imageAnimation { 
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
        12.5% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
        -moz-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}

@-webkit-keyframes
titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }
        25% {
        opacity: 1;
    }
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}
@-moz-keyframes
titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }   
        25% {
        opacity: 1;
    }   
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
} 

@keyframes

titleAnimation { 
    0% {
        opacity: 0;
    }
        12.5% {
        opacity: 1;
    }
        25% {
        opacity: 1;
    }   
        37.5% {
        opacity: 0;
    }
        100% {
        opacity: 0;
    }
}


.slideshow li:nth-child(1) span { background-image: url(bild/1.png); }

.slideshow li:nth-child(2) span {
  background-image: url(bild/2.png);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url(bild/3.png);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url(bild/1.png);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

有问题页面上的HTML

<!DOCTYPE html>
<html class="porto-bg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

</script>
</head>

<body>

<div id="header" class="h1">
MUA: CAROLINE MIKKELSEN</div>

<div id="menu" class="m1">
<ul class="menli">
<li><a href="index.html"> forside </a></li>
<li><a href="porto.html"> portofølje  </a></li>
<li><a href="samarbeid.html"> samarbeidspartnere  </a></li>
<li><a href="kontakt.html"> kontakt  </a></li>
</ul>
</div>

<ul class="slideshow">

  <li> <span>Slide one</span> </li>

  <li> <span>Slide two</span> </li>

  <li> <span>Slide three</span> </li>

  <li> <span>Slide four</span> </li>

</ul>

<div id="button" class="m3">
<a href="index.html"> GO BACK </a> 
</div> 

</body>

</html>

Answer 1

轮播图像也可以单独给出z-index。请使你的z-index =幻灯片数量+2（容器和一个额外的）并尝试

Answer 2

我认为正确使用定位可以解决您的问题...

每当我遇到这种问题时，我总是会参考W3Schools网站因为他们对所有事情都有非常多样化的信息...

W3Schools - CSS position Property

此外，我发现在容器div中包装像列表这样的元素更容易

<div class="container">

 <ul class="slideshow">
  <li> <span>Slide one</span> </li>
  <li> <span>Slide two</span> </li>
  <li> <span>Slide three</span> </li>
  <li> <span>Slide four</span> </li>
 </ul>

</div>

这样他们就会更容易操纵更大的事物......

我还注意到你重复了一些你可以分组的代码来保存几行代码：

.m1 .m2 .m3{
  font-family: GeosansLight, Verdana, sans-serif;
  color: #fff;
}

幻灯片

2 个答案: