html - 将相对内容放在绝对 div 上

Question

我正在尝试将文本放在我可以模糊和设置其他过滤器的图像上(此处简化为 div)，但我希望该文本相对定位，以便父容器可以调整大小。

#container {
  position: relative;
  width: 100%;
  background: red;
  height: 300px; /* For display sample purposes--no height is defined in production */
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: blue;
  opacity: 0.5;
}

.content {
  color: white;
  font-weight: bold;
  font-size: 3em;
}

<div id="container">
  <div class="bg"></div>
  <div class="content">
    asdasdasdasd
  </div>
</div>

这会导致蓝色 bg显示在 content 上.我知道我可以让内容 div 也绝对定位，但是容器的高度不会改变。

我怎样才能完成我正在寻找的东西？

Fiddle

Answer 1

将以下样式添加到 .content 类

.content {
  position: relative;
 z-index: 1;
}