html - 如何使设置高度的部分溢出可见？

Question

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

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

我已经尝试为容器类提供 1 的 z-index，并为信息部分提供可见的溢出和 1 的 z-index，但似乎没有任何效果。

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

Answer 1

z-index 仅适用于定位为 absolute、fixed 或 relative 的元素。您可以提取浅蓝色框并将其设置为position: absolute;，然后在bg div 和 上设置z-index容器 div.或者您可以将 z-index: -1;"设置为bgdiv 并从 container` 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; 添加到原始代码中的 info div。

* {
  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>