CSS 绝对定位的 div 不会推动其他内容下移

在本文中，我们将介绍 CSS 绝对定位的 div 不会推动其他内容下移的现象，并提供示例说明。

阅读更多：CSS 教程

什么是绝对定位？

在 CSS 中，绝对定位是一种定位元素的方式。通过绝对定位，我们可以将元素相对于其最近的非静态（非默认定位）的父元素或包含块进行定位。相比之下，相对定位则是将元素相对于其原始位置进行定位。

绝对定位的元素会从文档流中脱离，不再占据原有的位置。这就是为什么绝对定位的 div 不会推动其他内容下移的原因。

示例说明

下面的示例将帮助我们更好地了解绝对定位的 div 不会推动其他内容下移的现象。

HTML 代码：

<div class="container">
  <div class="top">顶部内容</div>
  <div class="absolute">绝对定位的 div</div>
  <div class="content">其他内容</div>
</div>

CSS 代码：

.container {
  position: relative;
  height: 200px;
  border: 1px solid #000;
}

.top {
  background-color: lightblue;
  height: 50px;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightgreen;
  width: 100px;
  height: 100px;
}

.content {
  background-color: lightyellow;
}

在上面的示例中，我们创建了一个 .container 的容器元素，并在其中添加了三个子元素：.top、.absolute 和 .content。

容器元素使用了相对定位 position: relative，这样，.absolute 元素的绝对定位将相对于 .container 元素进行定位。

.top 和 .content 元素都没有设置定位方式，所以它们将按照正常的文档流排列。.top 的高度为 50px，.content 没有设置高度。

.absolute 元素使用了绝对定位 position: absolute，并设定了 top 和 left 的值。该元素的宽度为 100px，高度也为 100px。在这个示例中，.absolute 元素定位到了距离 .container 顶部 50px，左侧 50px 的位置。

运行代码后，我们会发现，.absolute 元素不会推动 .content 元素下移。它会覆盖 .content 元素的部分区域，导致 .content 的内容被遮挡。而 .top 元素则会顶部排列，因为它是按照正常的文档流进行排列。

这个现象是因为绝对定位的元素脱离了普通文档流，不再占据原有的空间，所以不会影响其他元素的布局。