Question

我的站点中有一个div，该div具有绝对位置，但希望在此之后恢复正常的文档流。是否有类似clear:both;的东西，还是我需要创建一个具有相同高度的隐藏元素才能获得相同的效果。

因此，如您所见，此处的第二分区隐藏在绝对定位的元素后面。

div{
  width:100%;
  text-align:center;
  font-size:20px;
}
#div_1{
  position:absolute;
  height:50px;
  background-color:#F00;
}
#div_2{
  height:100px;
  background-color:#0F0;
}

<div id="div_1">Div that should appear on top</div>
<div id="div_2">Div that should appear below</div>

我需要该元素来保持绝对定位，但想要实现与此相同的文档流：

div{
  width:100%;
  text-align:center;
  font-size:20px;
}
#div_1{
  height:50px;
  background-color:#F00;
}
#div_2{
  height:100px;
  background-color:#0F0;
}

<div id="div_1">Div that should appear on top</div>
<div id="div_2">Div that should appear below</div>

Answer 1

一旦绝对定位的元素超出了文档流，就无法将其放回。

您建议添加一个隐藏元素是可行的，但您也可以将第二个div的margin-top设置为等于绝对定位元素的高度-它将其放置在第一个div以下。

CSS-绝对定位元素后恢复正常的文档流

1 个答案: