Force Relative DIV признает его абсолютных детей DIV

У меня проблема, в которой мой DIV, который position:relative не признает его детей position:absolute. Поэтому он вызывает проблему, которую следующий position:relative div отображается в неправильном месте.Force Relative DIV признает его абсолютных детей DIV

CSS:

#header{ 
    margin: 0 auto; 
    position:relative; 
    width:740px; 
    outline:2px solid black 
} 

#header #logo{ 
    position:absolute; 
    width:218px; 
    height:69px; 
    background-image:url('../images/Logo.png'); 
    top:15px; 
    left:30px; 
    text-indent: -999px; 
    overflow:hidden !important; 
} 

#header #logo a{ 
    width:218px; 
    height: 69px; 
} 

#header h1{ 
    color:#437297; 
    font-size:26px; 
    font-weight: normal; 
    position:absolute; 
    top:25px; 
    right:15px; 
    letter-spacing: 0.5px; 
} 

/* content */ 

#content{ 
    position: :relative; 
    margin: 0 auto; 
    width:1024px; 
    outline: 1px solid red; 
    min-height:10px; 
}

HTML:

<div id="header"> 
    <div id="logo"><a href="#">some text</a></div> 
    <h1>My Page</h1> 
</div> 

<div id="content"> 

</div>

Чтобы продемонстрировать эту проблему: http://jsfiddle.net/qBbYR/

Проблема заключается в том, ЧЕРНЫЙ указано DIV является заголовок DIV, который должен быть на вверху страницы, а RED, обозначенный DIV, является CONTENT DIV, который должен быть сразу после HEADER DIV.

Как вы можете видеть, заголовок DIV игнорирует его детей, потому что они расположены абсолютно, и это вызывает проблемы с дизайном.

Что делать, чтобы решить эту проблему?

источник

2013-07-07 kfirba

Весь смысл наличия обязательных кодовых меток заключается в том, что вы создаете вопрос хорошего качества, который не имеет таких пользователей, как я, его downvoting. Не объясняйте свой код в JSFiddle - _post его в вашем вопросе слишком. – Bojangles

в чем смысл ..? – kfirba

Дело в том, что вы публикуете свой код в своем вопросе, чтобы люди могли решить вашу проблему, вместо того чтобы постоянно переключаться между вашим JSFiddle и вашим описанием здесь на SO – Bojangles

Абсолютное позиционирование принимает элементы из нормального потока. Если вы хотите, чтобы они влияли на высоту их контейнеров, не размещайте их.

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

источник

2013-07-07 18:15:39 Quentin

Хорошо, позиционированные теги являются аутизмом. Если вам нужен контейнер для регулировки размеров его детей, у вас есть два варианта:

Явно устанавливаю размеры контейнера; или
Сделайте детей не расположенными (лучше ИМО).

источник

2013-07-07 18:16:10 LexLythius

Я вижу, поэтому использование позиции происходит только тогда, когда размеры не имеют отношения. – kfirba

Это имеет больше смысла для дискретных компонентов. Здесь вы можете использовать позиционирование для заголовка и оставить своих детей в покое. Но, возможно, это тоже не очень хороший вариант. Окна диалогового окна, например, являются отличным вариантом для позиционирования. – LexLythius

Force Relative DIV признает его абсолютных детей DIV

ответ

Смежные вопросы