I'm working on a website with a full-screen presentation. I followed a tutorial but I decided to go and add buttons to each slide, but for some reason--only the third slide's button is clickable.
I initially used a <button> tag, but it wasn't working so I used an <a> instead and it also doesn't work. I've tried setting the z-index to 999999999 with no luck.
#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>The reason for you problem is that you set absolute positioning for all of the slides. So even though, you can't see all of the slides at the same time due to opacity being set to 0 on inactive slides, they are all stacked on top of each other with the 3rd slide being the top-most. So when you try to press on the button on either of the first 2 slides, you are actually pressing on the 3rd one.
To fix this, get rid of position: absolute; rule on #slider .slide
and instead set position: absolute; for #slider .slide.current.