CSS多重叠加导致零高度答案

【问题标题】：CSS Multiple Overlays resulting in zero heightCSS多重叠加导致零高度
【发布时间】：2014-07-03 23:27:31
【问题描述】：

TLDR
div 不采用自动（基于内容）高度，而是高度始终为 0：Codepen

我有一个容器 div，我正在尝试使用绝对定位将第二个孩子放在第一个孩子之上。

只要容器有一个孩子，它就可以正常工作，如果有多个孩子，容器连同孩子的高度为零。 当我指定明确的高度时它会起作用。有没有办法让它工作？

<div class="cont">
  <div class="overlay first"></div>
  <div class="overlay second">
    Overlay text
  </div>
</div>


.cont {
  position: relative;
  background-color: #687999;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.first {
  background-color: #fff;
  z-index: 1;
}

.second {
  color: black;
  z-index: 2;
}

【问题讨论】：

非常确定您必须明确设置父级的高度或至少有一个具有高度的非定位子级。不幸的是，您显然试图做的事情是不可能的。想想看……你怎么能覆盖没有高度的东西……这不合逻辑。

标签： html css overlay

【解决方案1】：

我认为您的本意是使用 background-color: black 作为您的班级 .second。

看看：http://codepen.io/anon/pen/cstBe

【讨论】：

实际上，我正在尝试使用那个 codepen，并且我已将高度指定为 .cont，但我希望它在没有明确高度的情况下工作。