CSS перекрывающиеся элементы путем сохранения размера родителя

Question

Я хочу перекрывать некоторые элементы, не используя position: absolute. Причина в том, что у меня есть несколько вертикальных секций (которые не должны перекрываться), содержащие элементы, которые перекрываются. Проблема в том, что я не могу заранее знать, имеет ли перекрывающийся или перекрываемый элемент больший размер. Если один из них получит position: absolute, он будет выведен из потока, и поэтому родительский контейнер не будет соответствующим образом изменен и разделы будут перекрываться. Я уже нашел этот вопрос, но никто, казалось, не ответил на вопрос. Вот пример: http://jsfiddle.net/nNhtU/

Answer 1

Если это нормально, использование jQuery можно сделать довольно легко. Установите overflow свойство родительского элемента scroll:

.designer-question { 
    overflow: scroll; 
} 

И тогда вы можете установить высоту каждого .designer-question на высоте его img используя простой each цикл:

$('.designer-question').each(function() { 
    var $el = $(this);     // Get jQuery of each designer question 
    var $backImg = $('.back img', $el); // Get background image 
    $el.css('height', $backImg.height()); 
}); 

Я применил это к вашему jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/jfdPb/1/