位置绝对定位DIV相对于（也绝对定位）父DIV？ [英] Position absolutely positioned DIV relative to (also absolutely positioned) parent DIV?

问题描述

这是我在固定布局时总是遇到的一个问题。我有一个绝对定位的DIV，我放置一个孩子DIV里面，也需要绝对定位。但我真的想让这个孩子DIV的行为相对于父母...这是甚至可能吗？

This is one problem I always have when i'm fixing layouts. I've got a absolutely positioned DIV, I place a child-DIV inside which also needs to be absolutely positioned. But I really want this child-DIV to behave relative to the parent... Is this even possible? Or do I need to create a 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>

这是我想避免的包装解决方案：

This is the 'wrapping' solution which I'd rather avoid:

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

推荐答案

绝对定位的元素相对于边

An absolutely positioned element is positioned with respect to the edges of its nearest ancestor that is not positioned (i.e. not position: static).

由于父元素是 position：absolute，子元素将会

Since the parent element is position: absolute, the child will be positioned with respect to its edges.

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

So you appear to be asking how to get behaviour you already have. The comment in your first example appears to be incorrect.

这篇关于位置绝对定位DIV相对于（也绝对定位）父DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！