Я полный новичок в веб-программировании, поэтому вот моя проблема:
Это то, что у меня есть прямо сейчас: http://jsfiddle.net/H2V7W/5/
<div>
<ul>
<li>1</li>
</ul>
<ol>
<li>a</li>
</ol>
</div>
div{
position: relative;
border: 1px blue solid;
}
ul, ol {
border: 1px red solid;
}
Но как только я добавляю "положение: абсолютное" к двум спискам, высота элемента div уменьшается до 1px, чего я не хочу. http://jsfiddle.net/H2V7W/6/
div{
position: relative;
border: 1px blue solid;
}
ul, ol {
border: 1px red solid;
position: absolute;
}
Почему это происходит, что два листинга, похоже, полностью выпрыгнули из div? Я думал, что у меня будет "полный контроль", если я сделаю абсолютное позиционирование внутри родственника?
Согласно спецификации,
абсолютный
Позиция окна (и, возможно, размер) задается свойствами "сверху", "справа", "снизу" и "слева". Эти свойства указывают смещения относительно блока, содержащего блок. Абсолютно установленные коробки вынимаются из нормального потока. Это означает, что они не влияют на макет более поздних братьев и сестер. Кроме того, хотя абсолютно позиционированные поля имеют поля, они не сворачиваются с любыми другими полями.
Также см. Статью MDN.
div
.<ul>
и<ol>
абсолютно?