为何position: absolute会忽略position: static定位的元素？

要搞懂这个问题，核心得先明白CSS里包含块的概念：绝对定位（position: absolute）元素的位置计算，完全依赖于它的「最近的非static定位祖先元素」所创建的包含块。

为什么static定位的元素被排除？ #

position: static是所有元素的默认定位状态，它的设计目标就是让元素遵循正常文档流排列，不参与定位上下文的创建。CSS规范这么设定，是为了保证绝对定位的可控性：

• 如果static元素也能作为绝对定位的参考容器，你没法精准指定元素该相对于哪个父级定位——毕竟页面里绝大多数元素都是static状态，绝对定位的逻辑会变得混乱，开发者很难预测元素的最终位置。
• 只有当你主动给祖先元素设置position: relative/absolute/sticky（甚至fixed，不过fixed是特殊的视口定位）时，才等于告诉浏览器：「这个元素要成为后代绝对定位元素的参考容器」。

举个直观的例子 #

比如下面的代码：

<!-- 父元素是static定位 -->
<div style="position: static; width: 300px; height: 300px; border: 1px solid #333;">
  <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: coral;"></div>
</div>

这里的珊瑚色div会相对于浏览器视口定位，因为父元素是static，不创建包含块。

如果把父元素改成position: relative：

<!-- 父元素是relative定位 -->
<div style="position: relative; width: 300px; height: 300px; border: 1px solid #333;">
  <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: coral;"></div>
</div>

珊瑚色div就会相对于父元素的左上角偏移20px，因为relative定位的父元素创建了包含块。

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