我正在使用全屏演示文稿的网站。我遵循了教程，但是我决定去为每张幻灯片添加按钮，但是由于某些原因-只有第三张幻灯片的按钮可以单击。我最初使用的是<button>标记，但是它没有用，所以我改用了<a>，并且它也不起作用。我尝试将z-index设置为999999999，但没有运气。
#slider {
position: relative;
overflow: hidden;
height: 100vh;
width: 100%;
box-shadow: var(--shadow);
}
#slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
#slider .slide.current {
opacity: 1;
}
#slider .slide .content {
position: absolute;
bottom: 70px;
left: -700px;
opacity: 0;
width: 600px;
padding: 35px;
}
#slider .slide .content h1 {
margin-bottom: 10px;
}
#slider .slide.current .content {
opacity: 1;
transform: translateX(780px);
transition: all 0.7s ease-in-out 0.3s;
}
#slider .content a {
position: absolute;
z-index: 9999999999;
text-decoration: none;
color: white;
padding: 13px 15px;
border: 2px solid #fff;
margin-top: 10px;
}
#slider .content a:hover {
background: #fff;
color: #333;
}
button#next {
position: absolute;
top: 50%;
right: 15px;
}
button#prev {
position: absolute;
top: 50%;
left: 15px;
}
button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
padding: 13px 15px;
transition: 0.3s;
z-index: 4;
}
button:hover {
background-color: #fff;
color: #333;
transition: 0.3s;
}
/* Background Images */
.slide:first-child {
background: url(../images/slide1.png) no-repeat center center/cover;
}
.slide:nth-child(2) {
background: url(../images/slide2.png) no-repeat center center/cover;
}
.slide:nth-child(3) {
background: url(../images/slide3.png) no-repeat center center/cover;
}
@media(max-width: 500px) {
#slider .slide .content {
bottom: -300px;
left: 0;
width: 100%;
}
#slider .slide.current .content {
transform: translateY(-300px);
}
}<header>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<section id="header">
<a href="http://iu.edu/"><img src="images/logo.png" alt="Ocean World" class="hvr-float"></a>
<ul>
<li class="item hvr-float" id="description"><a href="#">Description</a></li>
<li class="item hvr-float" id="visualization"><a href="#">Visualization</a></li>
<li class="item hvr-float" id="About"><a href="#">About Us</a></li>
</ul>
</section>
<!-- Slideshow -->
<section id="slider">
<div class="slide current">
<div class="content">
<h1>Climate Change</h1>
<p>As climate change becomes a bigger and bigger issue, many people still don't know what it is.</p>
<br />
<a href="#">Learn more</a>
</div>
</div>
<div class="slide">
<div class="content">
<h1>See the Results</h1>
<p>You can find data here about the results climate change has had on our globe and it's water level.
</p>
<br />
<a href="#">Learn more</a>
</div>
</div>
<div class="slide">
<div class="content">
<h1>About Us</h1>
<p>We're a small work group from the IUPUI School of Informatics. Here, you can learn a little more about us.</p>
<br />
<a href="#">Learn more</a>
</div>
</div>
</section>
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>您遇到问题的原因是，您为所有幻灯片设置了绝对位置。因此，即使由于不活动的幻灯片上的不透明度设置为0，您也无法同时看到所有幻灯片，它们全部堆叠在一起，而第3张幻灯片是最上面的。因此，当您尝试按前两个幻灯片中任何一个的按钮时，实际上是按了第三个幻灯片。
要解决此问题，请删除#slider .slide上的position: absolute;规则而是将#slider .slide.current设置为position: absolute;。