user6797937 user6797937 - 2 months ago 11
CSS Question

Z-Index issues?

If you load up this code and scroll to the bottom, you will notice that the pictures are not clickable for some reason. What is supposed to happen is that the pictures are gateways for other pages (they have links associated with them). I have been attempting to figure out what is the issue here, but, unfortunately, as my coding experience is minute, I have been able to identify the issue. I believe it has something to do with the z-index values, but I just cannot see what is the issue here.

I would appreciate if someone could show me what the problem is so I can hopefully resolve the issue.

Since you will not be able to use the images I have since they are saved in my images folder, feel free to use random images from anywhere. All that matters is that someone figures out what the issue is.

Thank you,

John

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

</head>

<style>


@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}

.font {
font-family: 'Josefin Sans', sans-serif;
}

html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}

section.s7 {
position: relative;
width: auto;
height: auto;
}
section.s7::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}
/* Types of Headers */
section h1.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}

section h3.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 48px/1 'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}

section h5.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 32px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}

section h6.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 32px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}

section h1.main2 {

top: 25%;
left: 25%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;

}

#section01 {
background: url(http://wallpapercave.com/wp/LekAYO3.jpg) center center / cover no-repeat ;
}

#section02 {
background: url(http://wallpapercave.com/wp/8iAP1eI.jpg) center center / cover no-repeat ;
}

#section03 {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Flag_of_South_Vietnam.svg/2000px-Flag_of_South_Vietnam.svg.png) center center / cover no-repeat ;
}

#section04 {
background: url(http://quotesideas.com/wp-content/uploads/2015/03/blue_backgrounds_happy_birthday_wallpaper.jpg) center center / cover no-repeat;
}

#section05 {
background: url(https://wallpaperscraft.com/image/neymar_barcelona_football_102872_3840x2400.jpg) center center / cover no-repeat;
}

#section06 {
background: url(http://www.walldevil.com/wallpapers/a60/golden-spiral-spiral-geometry-math-mathematics.jpg) center center / cover no-repeat;
}

#section07 {
background:
url(http://www.cfau-pd.net/images/wallpaper-abstract/wallpaper-abstract-4.jpg) center center / cover ;
}

.arrow a {
position: absolute;
bottom: 50px;
left: 50%;
/* z-index: 2; */
display: inline-block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

/*
.arrow a:hover {
opacity: .5;
}
*/

#section01 a, #section02 a, #section03 a, #section03 a, #section04 a, #section05 a, #section06 a{
padding-top: 60px;
}

/* WHITE ARROW */
#section01 a span, #section04 a span, #section05 a span, #section06 a span{
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}

/* BLACK ARROW */
#section02 a span, #section03 a span, #section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb01 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb01 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}

/* NAV BAR */
ul.primarynav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
/*transform: translateX(-50%);*/
/* left: 50%; */
top: 0;
width: 100%;
z-index: 4;
opacity: 0.5;
}

li {
float: left;
}

li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
color: grey;
transition: 0.2s;
transition-timing-function: ease-in;
}

ul:hover {
opacity: 1;
}

.active {
color: grey;
}

/* NAV BAR 2 */

ul.navbar2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
z-index: 6;
width: 100%;
opacity: 0.5;
}

ul:hover.navbar2 {
opacity: 1;
}

li.navbar2 {
float: left;
}

li a.navbar2 {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active2).navbar2 {
color: grey;
transition: 0.2s;
transition-timing-function: ease-in;
}

li a:hover.navbar2 {
color: grey;
}

.active {
color: grey;
}

/* Other styling */

header.mainpage {
textalign: center;
color: black;
position: relative;
}

#h1mainpage{
font-size: 2em;
padding: 2em;
color: black;
}

.maincontainer {
background: white;
opacity: 0.95;
margin: auto;
margin-top: 8px;
margin-bottom: 8px;
width: 95%;
text-align: center;
}

.secondcontainer {

}

.textalign {
text-align: center;
}

.curvededges {
border: 1px solid black;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
width: 95%;
margin: auto;
padding: 1em;
height: auto;
background: white;
color: black;
}


/* Images organization */

#containermain {
display: flex;
justify-content: space-between;
visibility: hidden;
z-index: 6;
}

#containermain div {
width: 20%;
display:inline-block;
height: auto;
background: rgb(255,255,255,0);
}

#containermaintext div {
width: 250px;
height: auto;
background: rgb(255,255,255,0);
}

#containermain div:first-child {
border-left: 0;
}

#containermain div:last-child {
border-right: 0;
}

</style>

<!-- JAVA SCRIPT -->

<!-- Animations -->

<body style="font: 'Josefin Sans', sans-serif; margin: 0;">


<ul class="mainpage primarynav">
<li><a class = "font active" href="#">Home</a></li>
<li><a class = "font" href="#section07">Classes</a></li>
<li><a class = "font" href="#section02">About Me</a></li>
<li><a class = "font" href="stemproject.html">STEM Project</a></li>
<li><a class = "font" href="sports.html">Sports</a></li>
</ul>


<section id="section01" class="arrow">
<h1 class="main">Welcome</h1> <h5 class="main"> <br> <br> <br> <br> A Website by John Ta </h5>
<a href="#section02"><span></span>Scroll</a>
</section>

<!-- END SECTION01 -->

<section id="section02" class="arrow">
<h3 class="main" style = "color: black;
">Filler</h3>
<h5 class="main" style = "color: black;"> <br> <br> <br> <br> Filler</h5>
<a href="#section02" style = "color: black;"><span></span>Scroll</a>
</section>

<!-- END SECTION02 -->

<section id="section03" class="arrow">
<h3 class="main" style = "color: black">Filler</h3> <h5 class="main" style = "color: green"> <br> <br> <br> <br> Filler </h5>
<a href="#section02" style = "color: black"><span></span>Scroll</a>
</section>

<!-- END SECTION03 -->

<section id="section04" class="arrow">
<h3 class="main" style = "color: black">Filler</h3> <h5 class="main"> <br> <br> <br> <br> Filler </h5>
<a href="#section02"><span></span>Scroll</a>
</section>

<!-- END SECTION04 -->

<section id="section05" class="arrow">
<h3 class="main" >Filler</h3>
<h5 class="main"> <br> <br> <br> <br> Filler </h5>
<a href="#section02"><span></span>Scroll</a>
</section>

<!-- END SECTION05 -->

<section id="section06" class="arrow" style="z-index: 6;">
<h3 class="main" >What extracurriculars do I participate in?
</h3> <h5 class="main"> <br> <br> <br> <br> Programming team, math team, CyberPatriot </h5>

<a href="extracurriculars.html" style="z-index: 3;"><span></span>Scroll or Click Here to Learn More</a>
</section>

<!-- END SECTION06 -->


<!-- BEGIN SECTION07 -->

<section id="section07" style="z-index: 0;" class="s7">


<ul class="mainpage navbar2">
<li><a class = "font active" href="#">Home</a></li>
<li><a class = "font navbar2" href="computerscience.html">Computer Science</a></li>
<li><a class = "font navbar2" href="stem.html">STEM</a></li>
<li><a class = "font navbar2" href="stw.html">STW</a></li>
<li><a class = "font navbar2" href="math.html">Math</a></li>
<li><a class = "font navbar2" href="humanities.html">Humanities</a></li>
<li><a class = "font navbar2" href="physics.html">Physics</a></li>
<li><a class = "font navbar2" href="spanish.html">Language</a></li>

<li><a class = "font navbar2" href="#section02">About Me</a></li>
<li><a class = "font navbar2" href="stemproject.html">STEM Project</a></li>
<li><a class = "font navbar2" href="soccer.html">Sports</a></li>
</ul>

<div class="maincontainer">
<header class = "mainpage"> <h1 class="font" id = "h1mainpage"
style= "background: rgb(255,255,255,0)"> Use the navigation bar or click the pictures to begin </h1> </header>
</div>

<!-- IMAGES -->
<div class="maincontainer font">

<!-- IMAGES ROW 1 -->
<div id="containermain" class = "reveal">
<div>
<a href="physics.html">
<img src="images/atom.png" style="width: 100%;"> </a>
</div>

<div>
<a href="math.html">
<img src="images/mathematics.png" style="width: 100%;"> </a>
</div>

<div>
<a href="humanities.html">
<img src="images/books.png" style="width: 100%;"> </a>
</div>

<div>
<a href="stem.html">
<img src="images/stem.png" style="width: 100%;"> </a>
</div>
</div>

<!-- IMAGES ROW 1 SUPPLEMENT -->
<div id ="containermain" class="reveal">
<div>
<p class = "textalign"> Physics </p>
</div>

<div>
<p class = "textalign"> Mathematics </p>
</div>

<div>
<p class = "textalign"> Humanities </p>
</div>

<div>
<p class = "textalign"> STEM </p>
</div>
</div>

<!-- IMAGES ROW 2 -->
<div id="containermain" class = "reveal">
<div>
<a href="STW.html">
<img src="images/stw.png" style="width: 100%;"> </a>
</div>

<div>
<a href="math.html">
<img src="images/language.png" style="width: 100%;"> </a>
</div>

<div>
<a href="computerscience.html">
<img src="images/mac.png" style="width: 100%;"> </a>
</div>

<div>
<a href="aboutme.html">
<img src="images/stickfigure.png" style="width: 40%; height: 40%; margin: auto;"> </a>
</div>
</div>

<!-- IMAGES ROW 2 SUPPLEMENT -->
<div id ="containermain" class = "reveal">
<div>
<p class = "textalign"> STW </p>
</div>

<div>
<p class = "textalign"> Language </p>
</div>

<div>
<p class = "textalign"> Computer Science </p>
</div>

<div>
<p class = "textalign"> About Me </p>
</div>
</div>

<!-- IMAGES ROW 3 -->
<div id="containermain" class = "reveal">
<!-- Image 1 (http://prcsh.org/wp-content/uploads/2014/03/Other-Mail-icon.png) -->
<div>
<a href="contactme.html">
<img src="images/Mail.png" style="width: 100%;"> </a>
</div>
<!-- Image 2 (http://users.wpi.edu/~rlapointe/assets/massAcademyLogo.png) -->
<div>
<a href="http://www.massacademy.org/">
<img src=" " style="width: 100%;">
</a>
</div>
<!-- Image 3 (https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/1010px-FC_Barcelona_(crest).svg.png -->
<div>
<a href="soccer.html">
<img src="images/barcacrest.png" style="width: 100%;">
</a>
</div>

<!-- Image 4 (https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Nuvola_Math_and_Inf.svg/2000px-Nuvola_Math_and_Inf.svg.png) -->
<div>
<a href="math.html">
<img src="images/chrome.jpg" style="width: 100%;">
</a>
</div>
</div>

<!-- IMAGES ROW 3 SUPPLEMENT -->
<div id ="containermain" class = "reveal">
<div>
<p class = "textalign"> Contact Me </p>
</div>

<div>
<p class = "textalign"> </p>
</div>

<div>
<p class = "textalign"> Sports </p>
</div>

<div>
<p class = "textalign"> STEM Project </p>
</div>
</div>
</div>

<footer class="curvededges font reveal"> John Ta </footer>
</section>



<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('.reveal');
sr.reveal('.bar');
</script>
</body>

</html>

Answer

Its because of the section with id="section07". If you remove that section and replace it with a div then you are able to click on the images.

Line 473 of your code replace <section id="section07" style="z-index: 0;" class="s7"> with <div id="section07" class="s7">

And line 632 replace </section> with </div>

There is an issue with your z-index values in your css section elements, but you have multiple css elements including section so I will not correct that, instead I provided you with a more simple fix