Позиционировать абсолютно позиционированный DIV относительно (также абсолютно позиционированного) родительского DIV?

Это одна проблема, с которой я всегда сталкиваюсь, когда я чиню макеты. У меня есть абсолютно позиционированный DIV, я помещаю дочерний DIV внутрь, который также должен быть абсолютно позиционирован. Но я действительно хочу, чтобы этот ребенок-DIV вел себя по отношению к родителю ... Это вообще возможно? Или мне нужно создать wrap-DIV?

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

Это «обертка» решение, которое я бы предпочел избежать:

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

Ответы на вопрос(3)

Если вы уже абсолютно позиционируете один элемент div, можете ли вы просто добавить два смещения вместе для ребенка? например для #one быть в 10,10 и # два в 10,10 относительно #one,

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

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

Или это что-то более причудливое, например #one, фиксирующийся в верхнем левом углу и #two справа-внизу #one, и в этом случае базовая математика не работает таким образом? В этом случае, дополнительный div, вероятно, необходим.

Или я просто устал и что-то упустил?

Возможно, вы захотите спросить себя, действительно ли вам нужно использовать несколько вложенных абсолютно позиционированных элементов.

В противном случае, может быть лучше пойти на решение обертки.

Решение Вопроса

Абсолютно позиционированный элемент позиционируется относительно краев его ближайшего предка, который не позиционирован (т.е. не позиционирован: статический).

Поскольку родительский элементis position: absolute, дочерний элемент будет расположен относительно его ребер.

Таким образом, вы, кажется, спрашиваете, как получить поведение, которое у вас уже есть. Комментарий в вашем первом примере кажется неправильным.

Ваш ответ на вопрос