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，但似乎没什么用。

Codepen：https://codepen.io/KevinM818/pen/EoybqZ

Answer 1

z-index仅适用于定位为1，absolute或fixed的元素。您可以提取浅蓝色框并将其设置为relative，然后在position: absolute; div和z-index div上设置bg。或者，您可以设置container bg z-index: -1;" to the位置div and remove z-index and容器`div。

from the

* {
  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">  </div> </section> <section class="text">  <h1>How do I stop this green from overlapping the grey container?</h1> </section>添加到position: relative; div。

info

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

Answer 2

如果您希望覆盖绿色文字，那么您必须允许section.info高于700px。

在section.text处提供top=700px绝对定位，删除height上的section.info约束并将其设为更高z-index，它应该可以解决。< / p>

调整后的代码：https://codepen.io/anon/pen/BJzJzE

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

2 个答案: