Question

这是我在修复布局时总是遇到的一个问题。我有一个绝对定位的DIV，我放置一个孩子-DIV，其中也需要绝对定位。但我真的希望这个孩子-DIV能够相对于父母行事......这甚至可能吗？或者我是否需要创建wrap-DIV？

<div class="container" style="position:relative;">
    <div class="parent" style="position:absolute;">

        <!-- this child div will behave relative to .container -->
        <div class="child" style="position:absolute;"></div>
    </div>
</div>

这是我宁愿避免的“包装”解决方案：

<div class="container" style="position:relative;">
    <div class="parent" style="position:absolute;">
        <div class="wrapper" style="position:relative;">

            <!-- this child div will behave relative to .wrapper-->
            <div class="child" style="position:absolute;"></div>
        </div>
    </div>
</div>

Answer 1

如果您已经绝对定位了一个div，那么您不能只为孩子添加两个偏移吗？例如#one为10,10，而#two为10,10，相对于#one，

#one {
    position: absolute;
    left: 10px;
    top: 10px;
}

#two {
    position: absolute;
    left: 20px;
    top: 20px;
}

或者它是更高级的东西，比如#one锁定到左上角和#two到#one的右下角，在这种情况下基本数学不起作用？在这种情况下，可能需要额外的div。

或者我只是累了，错过了什么？

Answer 2

绝对定位的元素相对于未定位的最近祖先的边缘定位（即不是位置：静态）。

由于父元素是位置：绝对，因此子项将相对于其边缘定位。

所以你似乎在问如何获得你已经拥有的行为。您的第一个示例中的注释似乎不正确。

Answer 3

您可能想问自己是否真的需要使用多个嵌套的绝对定位元素。

否则，最好选择包装解决方案。

位置绝对定位DIV相对于（也绝对定位）父DIV？

3 个答案: