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

Единственный элемент на моей 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 div css имеют стиль position: absolute;

так что div #nav появляется в середине страницы.

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

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

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

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

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


html css positioning
person AlexMorley-Finch    schedule 31.08.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

  • экстернализируйте своих детей-навигаторов за пределами навигации
  • не абсолютная позиция "nav"
person Jerome Cance    schedule 31.08.2011
comment
Ясно, в этом случае я избавлюсь от контейнера #nav. Спасибо - person AlexMorley-Finch; 31.08.2011

arrow_upward
3
arrow_downward

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

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

person shanethehat    schedule 31.08.2011