javascript - 如何将元素放在绝对位置的元素下？

Question

这是我的代码:

.absolute_postion{
  position: absolute;
  border: 1px solid red;
  height: 30px;
  width: 100%;
  clear: both;
  
}

.other_elements{
  border: 1px solid green;
  height: 30px;
  width: 100%;
}

<div class="wrapper">
  <div class="absolute_postion">foo</div>
  <div class="other_elements">bar</div>
</div>

如您所见，div.other_elements 在 div.absolute_postion 下。我怎样才能把它放在 div.absolute_postion 的底部？

Answer 1

将 top:0 赋予 .absolute_postion 类，将 margin-top:30px 赋予 .other_elements。

.absolute_postion{
  position: absolute;
  border: 1px solid red;
  height: 30px;
  width: 100%;
  clear: both;
  top:0;  
}

.other_elements{
  border: 1px solid green;
  height: 30px;
  width: 100%;
  margin-top:30px;
}

<div class="wrapper">
  <div class="absolute_postion">foo</div>
  <div class="other_elements">bar</div>
</div>