Question

我将绝对定位的div标签（子）放在相对定位的div标签（父级）内。我想在父div之后显示文本，但是它被放置在错误的位置。

HTML 的

<div class="parent">
  <div class="child" style="width: 200px; height: 100px; background-color: red;"></div>
</div>
<p>The text which should be shown after parent div</p>

CSS

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

怎么办？

更新

类型错误已得到纠正。

Vitorino Fernandes提出的解决方案表明父div的高度很好。但是，如果我不知道父div的确切高度该怎么办？我可以省略父div的高度并将文本放在它后面吗？

Answer 1

拼写错误应为position而非postion应为height:100px而不是height 100px并将height添加到相对元素

＆＃13;

.parent {
  position: relative;
  width: 250px;
  height:300px;
  border:1px solid red;
}
.child {
  position: absolute;
  top: 20px;
  left:30px;
  width: 200px;
  height:100px;
  background-color: red;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>
<p>The text which should be shown after parent div</p>

＆＃13;

如何在相对定位元素后放置文本？

1 个答案: