为什么CSS中position:absolute定位的元素设置margin会生效？

核心原因 #

你观察到的margin在绝对定位元素上生效是CSS规范定义的正常表现，核心逻辑如下：

• 给元素设置position: absolute但没有显式配置top/right/bottom/left任何一个偏移属性时，元素会先锚定在自身的「静态位置」——也就是这个元素不加绝对定位、处于正常文档流时本该摆放的位置。
• margin属性本身对所有定位模式的元素都生效，从来没有「绝对定位元素margin无效」的规则。你的示例里#child2的静态位置和未加绝对定位的#child1在父容器内的初始位置完全一致，加上相同的margin:10px后，两者位置自然完全对齐。

常见认知误区 #

你之前的认知存在两个典型偏差：

1. 误区一：绝对定位元素脱离文档流后margin属性不生效
   脱离文档流仅意味着该元素不会占据正常文档流的空间，后续兄弟元素、父元素的布局计算会忽略它的存在，但元素自身的盒模型属性（margin、border、padding、content）全部正常生效，margin依然会参与元素最终位置的计算。
   最常见的佐证就是前端常用的绝对定位垂直水平居中技巧：给固定宽高的绝对定位元素设置left:0; right:0; top:0; bottom:0; margin:auto即可实现居中，完全依赖margin对绝对定位元素的生效规则。
2. 误区二：绝对定位元素永远相对于包含块的padding边缘定位
   只有显式设置top/left/right/bottom偏移值时，元素才会以最近的非static定位祖先（即包含块）的对应padding边缘为基准计算偏移；如果没设置任何偏移值，元素的定位基准是自身的静态位置，和普通流元素的位置参考逻辑一致。
   哪怕设置了偏移值，margin依然会参与位置计算：比如设置left:0的本质是让元素的margin盒左边缘对齐包含块的padding左边缘，这时候加margin-left:10px，元素的可视区域（border盒）就会距离包含块左边缘10px。

补充验证 #

你可以尝试给#child2加上top:0; left:0，会发现它的位置依然和#child1对齐——这是因为父容器#parent2没有设置padding，left:0让元素margin盒对齐父容器padding左边缘，加上10px的margin，最终位置和静态位置加margin的效果完全重合。

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