Z-Index问题？

Question

如果您将此代码段滚动到底部，您会发现图片无法点击。我面临的问题是我希望图片可以点击。

图片是指向其他页面的超链接。

我认为这个问题与$.prototype.datetimepicker = instance.datetimepicker; 值有关。

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

Answer 1

因为有id="section07"的部分。如果删除该部分并将其替换为div，则可以单击图像。

代码的第473行将<section id="section07" style="z-index: 0;" class="s7">替换为<div id="section07" class="s7">

第632行将</section>替换为</div>

您的css section元素中的z-index值存在问题，但您有多个css元素，包括section，所以我不会更正，相反，我为您提供了更简单的修复