如何使具有设置高度的部分的溢出可见？

Question

我有一个设置高度为 700px 的部分。这部分里面是一个容器，由于容器里面的内容，高度超过700px，显示溢出，这是想要的效果。但是，当我在此部分下方添加另一部分时，新部分的内容与容器的溢出部分重叠。

<section class="info">
    <div class="container">
        <!--Some Content-->
    </div>
</section>
<section class="text">
    <!--Some Content-->
</section> 

我试过给容器类一个 z-index 为 1，并给 info 部分一个可见的溢出和一个 z-index 为 1，但似乎没有任何效果。

代码笔：https ://codepen.io/KevinM818/pen/EoybqZ

Answer 1

z索引将仅被定位为元件上工作absolute，fixed或relative。您可以提取浅蓝色框并将其设置为position: absolute;，然后z-index在bgdiv 和containerdiv 上设置 。或者你可以设置z-index: -1;" to thebgdiv and remove位置andz-indexfrom the容器` div。

* {
  padding: 0;
  margin: 0;
}

.info {
  height: auto;
  position: relative;
}

.bg {
  height: 700px;
  background: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

.info .container {
  position: relative;
  width: 100px;
  height: 750px;
  margin: 0 auto;
  background: grey;
  z-index: 1;
}

.text {
  height: 500px;
  background: green;
}

<section class="info">
  <div class="bg"></div>
  <div class="container">
    <!--Some Content-->
  </div>
</section>
<section class="text">
  <!--Some Content-->
  <h1>How do I stop this green from overlapping the grey container?</h1>
</section>

调整后：我在另一个帖子上看到了你的评论。如果您希望灰色框与绿色框重叠，您只需在原始代码中添加position: relative;到infodiv即可。

* {
  padding: 0;
  margin: 0;
}

.info {
  position: relative;
}

.info {
  height: 700px;
  background: lightblue;
  position: relative;
}

.info .container {
  width: 100px;
  height: 750px;
  margin: 0 auto;
  background: grey;
}

.text {
  height: 500px;
  background: green;
}

<section class="info">
  <div class="container">
    <!--Some Content-->
  </div>
</section>
<section class="text">
  <!--Some Content-->
  <h1>How do I stop this green from overlapping the grey container?</h1>
</section>