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

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 и # два в 10,10 относительно # one,

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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