Css 引导段上的z索引

我有两个高度都

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指数，我不能做到这一点，即使我给出的指数高于第二节

这说明了我的问题。有没有办法让圆圈箭头图像位于第二部分的顶部，同时保持z索引在部分上，这样其他图像就可以滑到后面

---

谢谢

滑动效果只发生一次吗？如果是这样，您可以在动画完成后将所有的z索引重置为0，并给箭头图像一个z索引，例如10。#downImage{宽度：100px；高度：100px；位置：绝对；顶部：0px；左侧：50px；z索引：20；}动画仅在页面加载时发生。给出一个20的z指数似乎并不能解决这个问题——你的图像是绝对定位的——所以它的位置是相对于它的父对象的。沿着元素树向上走，您会在顶部找到Section2。这是第三节下面的z指数。因此，当图像包含在Section2中时，您将始终看到Section3后面的图像。解决此问题的唯一方法是相对于Section2和Section3的父对象定位图像。因此，您需要更改您的html。将图像移出分区，然后您可以将其放置在与每个分区相关的位置。幻灯片效果是否只发生一次？如果是这样，您可以在动画完成后将所有的z索引重置为0，并给箭头图像一个z索引，例如10。#downImage{宽度：100px；高度：100px；位置：绝对；顶部：0px；左侧：50px；z索引：20；}动画仅在页面加载时发生。给出一个20的z指数似乎并不能解决这个问题——你的图像是绝对定位的——所以它的位置是相对于它的父对象的。沿着元素树向上走，您会在顶部找到Section2。这是第三节下面的z指数。因此，当图像包含在Section2中时，您将始终看到Section3后面的图像。解决此问题的唯一方法是相对于Section2和Section3的父对象定位图像。因此，您需要更改您的html。将图像移出分区，然后您可以将其放置在与每个分区相关的位置。

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