我正在制作一个网站，我希望在页面上有一个幻灯片。但是，由于幻灯片放映整个页面，我的标题和菜单会将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>
答案 0 :(得分：0)
轮播图像也可以单独给出z-index。 请使你的z-index =幻灯片数量+2（容器和一个额外的）并尝试
答案 1 :(得分：0)
我认为正确使用定位可以解决您的问题...
每当我遇到这种问题时，我总是会参考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;
}