Search code examples
htmlcssz-index

Z-Index issues?

If you run this snippet scroll to the bottom, you will notice that the pictures are not clickable. The issue I am facing is that I want the pictures to be clickable.

The pictures are hyperlinks to other pages.

I believe the issue has something to do with the z-index values.

window.sr = ScrollReveal();
sr.reveal('.reveal');
sr.reveal('.bar');
@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;
}
<!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>
  <script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>

</head>

<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>

Solution

  • 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