Question

我的结构与此类似：

<div style="border: 1px solid red; position: relative; height: 200px">
        <div style="border: 1px solid green; position: absolute; left: 10px; top: 10px;height: 100px; width: 200px ">
            <div style="border: 1px solid blue; position: absolute; top: 15px; 10px; height: 20px; width: 20px;">

            </div>
        </div>
    </div>

在这个例子中，第3个div将第2个div作为相对。我一直认为你的位置是最近的relative元素，而不是最近的absolute元素为什么它表现得那样？我在最后的改变中遗漏了什么吗？

Answer 1

来自MDN：

<强>绝对

不要为元素留出空间。相反，将它定位在相对于其最近定位的祖先的指定位置（如果有的话），或者相对于初始包含块。绝对定位的盒子可以有边距，它们不会随之崩溃其他利润。

来自W3C：

在绝对定位模型中，框相对于其包含块显式偏移。

进一步导致

<强> Definition of containing block

如果元素有position: absolute，则包含块由最近的祖先建立，其位置不是静态的。

所以你的绝对元素总是相对于祖先位置，除非它是一个静态定位元素。

Answer 2

绝对元素定位到最近的positioned parent element，而不是孩子。

编辑：实际上，绝对元素定位到最接近的元素，该元素以任何方式定位，但是是静态的。你很少有绝对的内部绝对，更大的用法是绝对的内部相对，这就是为什么这是一个常见的误解。

为什么CSS位置绝对行为与其子绝对元素相关

2 个答案: