绝对div目标是父母父母

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关于 POSITION 的文档指出：

Absolute
不为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与任何其他边距折叠。

所以，答案并不难找……在这个结构中是做不到的。

唯一的方法是如果最接近的定位元素是第一个 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; }