Question

简单的问题，难以找到答案。

所以我有3个div。

    <div style="position: relative;" class="div-1">

        <div style="position: relative;" class="div-2">

            <div style="position: absolute;" class="div-3">

                Target Div-1's position relative.

            </div>

        </div>

    </div>

第三个div是绝对定位的，但它的目标是直接父：div-2。我希望它以div-1为目标。我怎么能实现这样的目标呢？

Answer 1

MDN's docs on POSITION州：

<强>绝对
不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

所以，答案并不难找到......在这种结构中无法做到。

唯一的方法是，如果最接近的定位元素是第一个div：

<div style="position: relative;" class="div-1">
    <div class="div-2">
        <div style="position: absolute;" class="div-3">
            Target Div-1's position relative.
        </div>
    </div>
</div>

如果您无法更改HTML，可以使用css类覆盖它：

.div-2 { position: initial !important; }

Answer 2

因为div-2是相对的，所以第三个div将相对于其父容器绝对定位。如果你想将它相对于div-1定位，你需要将它从div-2移到div-1。

请记住，当你绝对定位一个元素时，它不会替换它的兄弟元素，所以只要div-3是绝对定位的，div-3的定位就不会受到div-3的影响。< / p>

父母的父母是绝对的div

2 个答案: