绝对定位在绝对位置内

Question

我有3个div元素.

1号div更大(包裹)并且有position:relative;

第2个div位于绝对第1个div相对位置(并包含在第1个div)

第3个div包含在第2个div,也有绝对定位.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

为什么第3个div位置绝对到第2 个位置div(这也是第1个位置的绝对位置div)而不是第1个div位置具有相对位置？

因为第3 div是绝对定位到绝对定位第2 div.

Answer 1

因为position: absolute重置儿童的相对位置就像那样position: relative.

没有办法解决这个问题 - 如果你想要让第三个div绝对定位于第一个,你将不得不把它变成第一个的孩子.

Answer 2

二者position:relative并position:absolute建立包含元素作为定位ascestors.

如果您需要基于div 1定位div 3,则将其设为div 1的直接子项.

注意,这position: relative意味着元素相对于其自然位置定位,并且position: absolute意味着元素相对于其第一个position:relative或position:absolute祖先定位.

Answer 3

位置静态:静态位置是元素在HTML文件的正常流程中出现的默认方式(如果根本没有指定位置).

重要提示:top,right,bottom和left性能没有影响静态定位的元素.

位置相对:使用相对值定位元素会使元素(以及它占用的空间)保持在HTML文件的正常流程中.

然后,您可以通过一定量使用属性移动元素left,right,top和bottom.但是,这可能会导致元素与页面上的其他元素重叠 - 这可能是您想要的效果,也可能不是.

相对定位的元素可以从其斑点移动,但它占据的空间仍然存在.

绝对位置:将绝对位置值应用于元素会将其从正常流中移除.移动绝对定位元素时,其参考点是其最近的包含元素的顶部/左侧,其具有声明为非静态的位置 - 也称为其最近的定位上下文.因此,如果不存在包含静态位置的元素,则它将从body元素的左上角定位.

在你的情况下,第三个最近的容器是第二个.

Answer 4

另一个澄清的答案。

您当前的场景是这样的：

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

而你正在为此挣扎。

如果您可以更改 HTML，只需执行以下操作：

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */