work around for z-index needing to be above and below a div at the same time

Question

I have a footer and a horizontally scrolling div that features a custom scrollbar that is situated at the bottom of the screen. In order for the scrollbar to be situated at the bottom of the screen, my horizontally scrolling div has to be 100vh, but when it's 100vh it is placed on top of the footer and the footer isn't clickable. When I raise my footer above my horizontally scrolling div, the custom scrollbar is no longer clickable because it is below the footer. Is there any workaround for this? Unsure if the z-index could somehow be two places at once? Sounds impossible..

JSFiddle showing the issue: (in this current setup the scrollbar is not clickable... remove the z-index on the .footer and it becomes clickable but then the footer is no longer clickable...)

https://jsfiddle.net/pas3wqf2/

Code:

    <div class="footer">
      <li>
        <a href="mailto:a@a.com">CONTACT</a><span class="span"> &mdash; </span>
      </li>
      <li>
        <a href="https://www.instagram.com//" target="_blank">INSTAGRAM</a><span class="span"> &mdash; </span>
      </li>
      <li>
        <a href="https://www.youtube.com/c/" target="_blank">YOUTUBE</a>
      </li>
    </div>
    <div id="horizontalcontainer">
      <div id="scrolling-wrapper">
        <div class="videocard1">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <div class="videocard">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <div class="videocardlast">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
      </div>
    </div>

    ::-webkit-scrollbar {
    height: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: transparent;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 25px;
    }

    #horizontalcontainer {
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    }

    #scrolling-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
    height: 100vh;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    .videocard1 {
    padding-left: 27%;
    padding-right: 2.5%;
    display: inline-block;
    position: relative;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
    }

    .videocard {
    padding-right: 2.5%;
    display: inline-block;
    position: relative;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
    }

    .videocardlast {
    padding-right: 27%;
    display: inline-block;
    position: relative;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
    }

    .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 100000;
    }

    .footer>li {
    margin-bottom: 2%;
    display: inline-block;
    }

    .footer>li>a {
    display: inline-block;
    font-family: neue-haas-grotesk-text, sans-serif;
    color: #7e7e7e;
    font-weight: 400;
    font-style: normal;
    list-style: none;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    }

    .footer>li>a:hover {
    color: black;
    }

    .span {
    font-family: neue-haas-grotesk-text, sans-serif;
    color: #7e7e7e;
    font-weight: 400;
    font-style: normal;
    list-style: none;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    user-select: none;
    }

Thanks!

Answer 1

You can keep your footer with a z-index above the horizontalcontainer, but set your footer to rest slightly above the horizontalcontainer. It was set to have a bottom of 0, but if you move it up slightly to around 6px, both will work:

::-webkit-scrollbar {
  height: 10px;
}


/* Track */

 ::-webkit-scrollbar-track {
  background: transparent;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 25px;
}

#horizontalcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.videocard1 {
  padding-left: 27%;
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

.videocard {
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

.videocardlast {
  padding-right: 27%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

.footer {
  position: fixed;
  left: 0;
  bottom: 6px;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.footer>li {
  margin-bottom: 2%;
  display: inline-block;
}

.footer>li>a {
  display: inline-block;
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #7e7e7e;
  font-weight: 400;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
}

.footer>li>a:hover {
  color: black;
}

.span {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #7e7e7e;
  font-weight: 400;
  font-style: normal;
  list-style: none;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  user-select: none;
}

<div class="footer">
  <li>
    <a href="mailto:a@a.com">CONTACT</a><span class="span"> &mdash; </span>
  </li>
  <li>
    <a href="https://www.instagram.com//" target="_blank">INSTAGRAM</a><span class="span"> &mdash; </span>
  </li>
  <li>
    <a href="https://www.youtube.com/c/" target="_blank">YOUTUBE</a>
  </li>
</div>
<div id="horizontalcontainer">
  <div id="scrolling-wrapper">
    <div class="videocard1">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocardlast">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
  </div>
</div>