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

标签 html css

我正在尝试将文本放在我可以模糊和设置其他过滤器的图像上(此处简化为 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

最佳答案

将以下样式添加到 .content 类

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

关于html - 将相对内容放在绝对 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50442180/

相关文章:

在 Windows 上使用 url() 加载图像的 CSS 会导致路径困惑

html - 将 div 并排放置......我读过的任何内容都没有奏效

html - 如何从 ios webview 读取文档目录中的图像文件

html - 从 Bootstrap 3 迁移到 Bootstrap 4?

html - CSS自定义梯形,边框半径倒置

javascript - 无法在 jQuery UI 对话框中制作方形 Canvas

javascript - 如何防止JS使div容器变形?

html - 如何在 HTML 或 CSS 中绘制矩形?

html/css : Draw borders through a table cell

javascript - 如何在jQuery(或JavaScript)中选择邻居元素