Почему при абсолютном позиционировании в css высота контейнера получается 0 и как с этим бороться?

Question

[pablo_d]

Я вставил несколько изображений с помощью абсолютного позиционирования, начал исследовать элемент а высоту контейнера показывает 0, хотел бы узнать как решить эту проблему?

Comments

[Сергей Сергей]

Как предотвратить схлопывание блока с position: relative;, когда внутри него блок с position: absolute;? че-то такое

[Ankhena]

Абсолют выводит блоки из потока и родитель перестает что-либо знать об их размерах.

Как с этим бороться?

Например, использовать гриды вместо абсолютов.
Но хорошо бы знать какого результата вы хотите достичь.

[SagePtr]

Перед тем, как изображение загрузилось, у него размеры 0х0, если не заданы явно через атрибуты

Answer 1

[Даниил Сугоняев]

Хорошо бы привести код к вопросу.
Все зависит от изображения, если вы вставляете svg, то у него может не быть фиксированных размеров и в таком случае высота будет 0.
Решение - выставить фиксированные размеры картинкам

Comments

[pablo_d]

Формат jpg

[Даниил Сугоняев]

pablo_d, Точно так же можно зафиксировать нужный размер, это хорошая практика в любом случае

[pablo_d]

Я задал своему контейнеру position: relative; А изображениям находящимся внутри этого контейнера position: absolute; все изображения разместил на странице но высота контейнера получается нулевой

[Даниил Сугоняев]

pablo_d, Теперь кажется понимаю. Задайте изображениям вместо position: absolute тоже position: relative, остальное оставьте как есть. В таком случае изображения сдвинутся, но при этом останутся в потоке и ваш контейнер будет иметь высоту
Хотя само решение мне все еще непонятно, кажется, что вам стоит использовать более надежный способ позиционирования

[pablo_d]

т.е указать размер каждого изображения или задать отдельно для всего контейнера высоту?

[Даниил Сугоняев]

Размер каждого изображения тоже стоит задать, это хорошая практика
Но даже с заданными размерами высота родителя изображений останется 0, если они позиционируются через absolute.

[Ankhena]

Даниил Сугоняев,

Задайте изображениям вместо position: absolute тоже position: relative

Вы отдаете себе отчет, что координаты при этом по-разному рассчитываются? И bottom: 0 right 0 не поместит изображение в правый нижний угол родителя.