Схлапование родительского блока?

Question

[Zankur]

Всем привет!
Столкнулся со следующей проблемой. Есть контейнер c фиксированной шириной и position: relative. В него вложен position: absolute блок с width: 100%, высотка дочернего блока задается изображением с width: 100%.
Проблема в том, что родительский контейнер схлапывается по высоте, как можно избежать подобной ситуации?
Пример верстки можно посмотреть по ссылке: https://codepen.io/anon/pen/bamPZy
Спасибо!

Comments

[Александр Nameless08]

Какая перед вами стоит задача? В данном случае у вас родитель а в нем дочерний позиционируется абсолютно => родитель схлопывается. Сам img влияет на высоту непосредственного родителя, который вырван из потока, но не влияет на внешний контейнер. Да и вот тут точка упущена - prntscr.com/i225vh

А вот я вытащил картинку во внешний родитель: https://jsfiddle.net/Nameless08/us40j95L/ и дописал стили для .wrap-absolute , но в этом случае решается задача создания перекрытия наложенного поверх картинки. А какая все же у вас задача?

Answer 1

[Odisseya]

Вы вырвали из потока единственный дочерний эл-т (position: absolute), поэтому родительский считает себя пустым и схлопывается. А какую высоту вы хотите, чтобы имел родительский контейнер — фиксированную или по контенту?

Comments

[Zankur]

По контенту

[Odisseya]

Тогда, можно вынести контент (изображение) из абсолютно спозиционированного блока прямо в родительский, либо изменить тип позиционирования.