CSS绝对定位的“绝对”究竟指什么？

CSS position: absolute 属性的“绝对”含义解析

CSS 中的 position: absolute 常常让人误解。许多人认为它是相对于父元素或最近的祖先元素进行定位，这与文档中“相对于其最近的已定位祖先元素定位”的描述一致。但为什么称之为“绝对”定位呢？ 这种说法看似矛盾，其关键在于理解“绝对”并非指位置计算方式，而是指其与文档流的关系。

position: absolute 元素会脱离文档流。这意味着它不再占据文档空间，不影响其他元素的布局。其他元素渲染时会忽略它，就好像它不存在一样。这就是“绝对”的真正含义：完全不受文档流约束。

上图直观地展现了绝对定位元素与文档流的关系，突出了这种“脱离”的概念。由于脱离文档流，绝对定位元素的位置完全由 top、left、right、bottom 属性及其最近的已定位祖先元素决定，不受周围元素影响。因此，即使父元素或祖先元素发生变化，绝对定位元素的位置也可能保持不变（除非其定位参照元素改变）。这与它的位置计算方式（相对于最近的已定位祖先元素）并不矛盾，而是对其在页面布局中角色的补充说明。