解决 z-index 需要同时高于和低于 div

Question

我有一个页脚和一个水平滚动条 div，它具有位于屏幕底部的自定义滚动条。为了使滚动条位于屏幕底部，我的水平滚动 div 必须为 100vh，但当它为 100vh 时，它位于页脚的顶部并且页脚不可点击。当我将页脚抬高到水平滚动 div 上方时，自定义滚动条不再可点击，因为它位于页脚下方。有什么解决方法吗？不确定 z-index 是否可以以某种方式同时出现在两个地方？听起来不可能..

JSFiddle 显示了问题：（在此当前设置中，滚动条不可点击...删除 .footer 上的 z-index 并且它变为可点击但页脚不再可点击...）

https://jsfiddle.net/pas3wqf2/

代码：

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

谢谢！

Answer 1

我建议在 .footer 上方添加一个 margin-top: -10px，因为滚动条是 10px。

Answer 2

因为 .footer 有 100% 和更高 z-index 这是预期的行为。

使用您的标记，您可以通过以下方式解决该问题：

将 .footer 的 bottom 属性设置在滚动条上方：bottom: 1em
省略 100% 宽度并将 left 属性更改为 calc(100% - 100px)（这会导致页脚仅隐藏滚动部分）。

我会选择 1。

Answer 3

您可以将页脚的 z-index 保持在 horizontalcontainer 上方，但将页脚设置为略高于 horizontalcontainer。它被设置为底部为 0，但如果你将它稍微向上移动到 6px 左右，两者都会起作用：

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

解决 z-index 需要同时高于和低于 div

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

html

css

z-index