为什么不能相对于“位置：静态”的父元素定位“位置：绝对”元素？答案

【问题标题】：Why can't a 'position: absolute' element be positioned in relation to a parent that is 'position: static'?为什么不能相对于“位置：静态”的父元素定位“位置：绝对”元素？
【发布时间】：2014-07-30 16:20:27
【问题描述】：

有人可以解释为什么 position: absolute; 只能相对于其最近的非 position: static; 父级定位吗？

元素无法相对于其position: static; 父元素定位的原因是什么？

【问题讨论】：

规范并没有真正说明这一点，只是它就是这样。但是，它确实说带有position: static 的元素被视为非定位 元素，但当然，这几乎无法解释任何事情。
Difference between static and relative positioning 的可能重复项
@LeBen：虽然这个问题是相关的，但我不认为这是重复的。
“可能”重复 ;-) 是的，我同意，对此感到抱歉。
是的，我知道静态实际上是“位置：无”，但我试图找到证明非“位置：静态”限制的示例案例。可能只是其中之一。

标签： html css position absolute

【解决方案1】：

我相信这背后的原因是您可以相对于不只是该元素的直接父元素的元素定位绝对元素。由于position: static 是默认值，因此将其作为元素是否应相对于该父元素定位自身的决定因素是有意义的。

例如，我可以使用以下 html 来相对于其祖父元素定位元素：

<div id="grandparent" style="position:relative">
    <div id="parent">
       <div id="child" style="position:absolute;top:0">
       </div>
    </div>
</div>

【讨论】：

正确。绝对定位元素相对的元素称为其containing block。我刚刚回忆了一个使用 position 属性来控制哪个元素是包含块的示例，该块在this section 中给出，它描述了溢出属性。该示例表明，如果绝对定位元素的包含块是其祖父母或其他远祖，则绝对定位元素不受其父元素的溢出属性的影响。