Z-Index問題？

Question

如果將此片段滾動到底部，您將注意到圖片不可單擊。 我面臨的問題是我希望圖片可點擊。

圖片是指向其他頁面的超鏈接。

我認為問題與z-index值有關。

 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> 

Answer 1

這是因為具有id="section07" 。 如果刪除該部分並將其替換為div，則可以單擊圖像。

您的代碼的第473行替換<section id="section07" style="z-index: 0;" class="s7"> <section id="section07" style="z-index: 0;" class="s7">與<div id="section07" class="s7">

並且第632行用</div>替換</section> </div>

css section元素中的z-index值存在問題，但是您有多個css元素（包括section因此我不會進行更正，而是為您提供了更簡單的解決方法