Question

我试图将文字放在图像上（在这里简化为div），我可以模糊并设置其他过滤器，但我希望该文本相对定位，以便父容器可以调整大小。 / p>

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

Fiddle

Answer 1

将以下样式添加到.content类

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

Answer 2

我认为这些东西对你有用，我希望它会对你有所帮助。试试吧。

＆＃13;

#main {
  position: relative;
  height: 200px;
  width: 200px;
  border: 2px solid #aaa;
  text-align:center
}
#center {
  position: relative;
  left:25%;
  top:25%;
  border: 1px solid #aaa;
  width: 100px;height: 100px; 
  text-align:center
}

div { height: 50px;width: 50px;}

.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute;  bottom:0;}

＆＃13;

<div id="main">
  <div class="blue">blue</div>
  <div class="green">green</div>
  <div class="yellow">yellow</div>
  <div class="red">red</div>
  <div id="center">
    <div class="blue">center-blue</div>
    <div class="green">center-green</div>
    <div class="yellow">center-yellow</div>
    <div class="red">center-red</div>
  </div>
</div>
<p>This is relative absolute using css.</p>

＆＃13;

将相对内容放在绝对div上

2 个答案: