Как сделать элементы с position:absolute и динамической высотой занимать вертикальное пространство, используя только css? Есть ли трюк с контейнерами и дисплеем, который я могу использовать?
Вертикальное пространство на элементах с положением: абсолютное
Ответ 1
К сожалению, использование абсолютного позиционирования означает, по определению, что ваш элемент больше не занимает пространство. Так что нет, только через css нет способа сделать это.
Вы можете, конечно, использовать jQuery (или простой javascript), чтобы выполнить это. Как бы я это сделал, есть элемент space рядом с каждым вертикальным элементом. Закрепите как элемент пространства, так и абсолютно расположенный вертикальный элемент в относительно позиционированном div. При загрузке страницы измените height элемента пространства, чтобы он соответствовал высоте вертикального элемента.
Ответ 2
position: absolute означает, что они не занимают пространство в потоке. Однако вам не нужно анимировать использование поля, вы можете использовать float, чтобы элементы занимали все пространство и делали каждый из элементов position:relative.
div.animate-me {
width: 300px;
margin: 20px;
float: left;
left: -1000px; // Make them start offscreen
position: relative;
border: 1px solid red;
visibility: hidden
}
$('div').css().animate({
left: 0
});