绝对定位的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。我该怎么做？

- Don Munter

---

简单来说，除非从div-2中移除position:relative属性，否则你无法实现这个操作。 - mituw16

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; }

- LcSalazar

---

很遗憾，这在CMS生成的模块中是不可能的。感谢您的回答！ - Don Munter

你可以在CSS中覆盖它。也许是.div-2 { position: initial !important; }。 - LcSalazar

Answer 2

因为div-2是相对定位，第三个div将绝对定位于其父容器。如果您想将其相对于div-1定位，则需要将其移出div-2并放入div-1中。

请记住，当您绝对定位一个元素时，它不会移动其兄弟元素，因此使div-3成为div-2的兄弟不会影响div-2的定位，只要div-3是绝对定位的.

- ElGavilan