проблемы с родительским абсолютным позиционированием

Question

Единственный элемент на моей html-странице, имеющий стиль position: relative;, это тело.

Внутри тела есть:

<div id="nav" style="position:absolute;top:275px;left:50%;margin-left:-350px;">
    <div>foo</div>
    <div>bar</div>
</div>

#nav и #nav divCSS имеет стиль position: absolute;

, поэтому в середине страницы появляется #nav div.

теперь, потому что тело является относительным и является ЕДИНСТВЕННЫМ относительным элементом, стилемиз left:0 в элементах #nav div ("foo" и "bar") следует расположить элементы на 0 пикселей слева от тела.Но, к сожалению, foo и bar расположены в 0 пикселях слева от элемента #nav.Почему это так?

У меня сложилось впечатление, что элементы с относительным положением рассматриваются как «родительские» в терминах позиционирования, поэтому элементы foo и bar должны располагаться в 0 пикселях слева от тела.

Если это не правильно, кто-нибудь знает, как расположить элементы таким образом?

Если мое предположение верно, то кто-нибудь может сказать, почему в моем случае это не работает.

Спасибо, Алекс

Answer 1

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

Это означает, что в вашем случае поведение правильное. div#nav является первым позиционированным родителем div#nav div из-за абсолютного позиционирования. Если вы хотите, чтобы эти div'ы располагались относительно края тела, вам придется вывести их из div#nav.

Answer 2

Это правильно, потому что при указании позиции (абсолютной, относительной или фиксированной) все дочерние элементы ссылаются на этот элемент.В вашем случае, так как nav находится в абсолютном положении, каждый div внутри nav относительно позиционируется относительно позиции nav.

Обходные пути:

• экстернализует ваших детей nav вне nav
• не абсолютная позиция "nav"