Question

我有两个100vh高度的部分。

<section id="sectionTwo" class="section">
  <div class="container d-flex flex-column justify-content-between mh100vh">
    <div class="row">
      <div id="box">

      </div>
    </div>
    <div class="row d-flex align-items-end">
      <div class="col-md-8 offset-4">
        <img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
        <img id="downImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Circle-icons-arrow-down.svg/2000px-Circle-icons-arrow-down.svg.png" class="img-fluid btnImage">
      </div>
    </div>
  </div>
</section>
<section id="sectionThree" class="section">
 <div class="container d-flex flex-column justify-content-between mh100vh">
 </div>
</section>

第一部分上有几张图片，其中一张需要向上滑动并显示。我面临的问题是当它向上滑动时，它位于第二部分的顶部，而不是从它后面向上滑动。因此，我给每个部分一个z-index

#sectionTwo {
  position: relative;
  z-index: 10;
}
#sectionThree {
  position: relative;
  z-index:20;
  background: #ccc;
}

现在这已解决了这个问题。然而，我不是面临另一个问题。第一部分有一个箭头图像，需要部分位于第二部分的顶部。由于z-index，我无法实现这一点，即使我给出的索引高于第二部分。

这JSFiddle证明了我的问题。有没有办法让圆圈箭头图像位于第二部分的顶部，同时保持部分上的z索引我是如何拥有它们所以其他图像可以向后滑动？

由于

bootstrap部分的z-index

0 个答案: