设置position:absolute的div导致display:block失效，如何让后续div排列在其下方

问题根因 #

position: absolute 会让元素完全脱离正常文档流，浏览器排版时不会把它占据的空间算入其他普通流元素的布局逻辑里，所以不管你给两个元素加不加display:block，.about都会默认从页面左上角开始排布，自然就和脱离流的.home重叠。

解决方案 #

你可以根据自己的实际需求选对应方案：

方案1：保留absolute定位，主动给.about加偏移避开

如果你的需求确实是要.home固定在父容器/页面的左下角，不需要随其他内容滚动（如果是固定在视口可以把absolute改成fixed更合适），直接给.about添加上边距，值至少大于.home的总高度即可：

.about {
  display: block;
  border: 2px solid red;
  /* 按需调整数值，只要足够覆盖.home的高度+上下边距就行 */
  margin-top: 180px;
}

注意：如果.home的内容是动态的、高度不固定，这个方案不适用，推荐选择方案2或3

方案2：不用绝对定位，让两个元素都留在正常文档流

如果你只是想让.home排在页面下半部分的左侧，两个元素按顺序上下排布不重叠，直接删掉.home的position: absolute、top:50%属性，改用margin调整位置即可：

.home {
  /* 删掉这两行 position: absolute; top: 50%; */
  border: 2px solid green;
  left: 8px;
  padding: 33px 23px;
  line-height: 60px;
  display: block;
  /* 按需调整上边距实现你要的位置，和原top:50%效果一致 */
  margin-top: 50vh;
}

这时候两个元素都在正常文档流里，.about会自动排在.home的下方，不会出现重叠问题。

方案3：用flex布局实现.home在父容器左下角，同时不重叠

如果你的需求是.home始终贴在父容器的左下角，父容器高度至少撑满一屏，给两个元素加个公共父容器，用flex布局实现：

<div class="container">
  <div class="home">div1</div>
  <div class="about">div2</div>
</div>

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 让内容靠底部排列，home就会出现在容器左下角 */
  justify-content: flex-end;
}
.home {
  /* 删掉position:absolute和top属性 */
  border: 2px solid green;
  margin-left: 8px;
  padding: 33px 23px;
  line-height: 60px;
}
.about {
  border: 2px solid red;
}

这种方案两个元素都在正常文档流里，不会重叠，同时.home会始终贴在容器底部。

内容的提问来源于stack exchange，提问作者Anonymous Person