如何解决position:absolute/relative元素遮挡bottom div的布局问题？

核心原因是：绝对定位（position:absolute）的元素会完全脱离正常文档流，不会占据任何文档空间。你的.topo容器是相对定位，但它的子元素.area-logo和.area-menu都是绝对定位，导致.topo本身高度塌陷为0，所以后面的浮动元素.bottom-div会往上移动，和绝对定位元素重叠。

要让.bottom-div正常显示在这些元素下方，有两种简单可行的方法：

方法一：给父容器.topo设置固定高度 #

因为你的两个绝对定位子元素高度都是250px，直接给.topo设置相同的高度，让它在文档流中占据足够空间，后面的元素就会自动排在它下方：

.topo {
  position: relative;
  height: 250px; /* 添加这一行，撑起父容器空间 */
}

.area-logo {
  position: absolute;
  width: 798px;
  background-color: green;
  left: 0px;
  top: 0px;
  background: url(topo-imagem-principal.png);
  height: 250px;
}

.area-menu {
  background: url(topo-imagem-lateral.png);
  position: absolute;
  top: 0px;
  right: 0px;
  width: 639px;
  height: 250px;
}

.bottom-div {
  width: 50%;
  float: left;
}

/* 修正选择器错误，添加class区分右侧元素 */
.bottom-div.right {
  width: 50%;
  float: right;
}

方法二：用伪元素灵活撑起父容器高度 #

如果子元素高度不固定，或者不想写死高度，可以给.topo添加伪元素来解决高度塌陷问题：

.topo {
  position: relative;
}

/* 用伪元素撑起父容器高度，值与子元素高度一致 */
.topo::after {
  content: "";
  display: block;
  height: 250px;
  visibility: hidden;
}

/* 其他样式保持不变 */
.area-logo {
  position: absolute;
  width: 798px;
  background-color: green;
  left: 0px;
  top: 0px;
  background: url(topo-imagem-principal.png);
  height: 250px;
}

.area-menu {
  background: url(topo-imagem-lateral.png);
  position: absolute;
  top: 0px;
  right: 0px;
  width: 639px;
  height: 250px;
}

.bottom-div {
  width: 50%;
  float: left;
}

.bottom-div.right {
  width: 50%;
  float: right;
}

额外提示：你原代码里第二个浮动元素的选择器写错了（少了.），样式不会生效，建议给右侧元素加额外class区分，比如.bottom-div.right。

内容的提问来源于stack exchange，提问作者Renan Saldanha