CSS中position:absolute与relative同级元素定位疑惑求解

首先明确两个核心点：

• 文档中提到的「最近的已定位祖先」，特指position值不为static的祖先元素（static是默认定位值）。你的代码里，外层div用的是默认的position:static，所以它不算「已定位祖先」，element2会向上追溯至初始包含块（通常是浏览器视口）作为定位基准。
• 当absolute元素未设置top/left/right/bottom这类偏移属性时，它的位置会保留在正常文档流中原本的位置——也就是如果去掉position:absolute，它会出现在element1下方；设置absolute后它脱离文档流，但位置会「停留在原地」，看起来像是受element1影响，实际这只是偏移值为auto时的默认行为，和element1的position:relative无关。

如果要让element2相对于外层div定位，只需给外层div添加非static的定位属性即可：

<div style="position:relative;">
  <div style="position:relative;">element1</div>
  <div style="position:absolute; top:0; left:0;">element2</div>
</div>

此时外层div成为element2的已定位祖先，设置top/left就能让element2相对于外层div的左上角定位。

另外，element1的position:relative仅会让它自身成为子元素的定位上下文，对同级的element2没有任何定位影响——你看到的位置关联，只是element1占据了文档流空间，撑起了外层div的高度，而element2的auto偏移让它停留在原本的文档流位置罢了。

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