HTML и CSS - div с абсолютным позиционированием переполняет относительный div, неожиданный результат

У меня есть div с абсолютным позиционированием (содержит некоторый текст) внутри относительного div (содержит изображение), и он установлен на дно: 0px; однако абсолютный div переполняется под изображением. Кажется, я не могу решить эту проблему, я попытался применить overflow: hidden к относительному div.

Подробнее о проблеме см. ниже https://jsfiddle.net/rebeccasmith1301/zzpxe767/.

HTML

<div id="page-wrapper">
    <div id="footer-header-image">
        <div id="header-image-title">
            <h2>Some text</h2>
        </div>
        <img src="http://trustedfinance.co.uk/wp-content/uploads/2014/06/placeholder.png" id="apprentice-img"/>
    </div>
</div>

CSS

#page-wrapper {
    background-color: red; 
    height: 400px;
}

#footer-header-image {
    position:relative;
}
#header-image-title {
    position: absolute;
    left: 1.5%;
    bottom: 0px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, .85);
    padding: 2% 1.5% 2% 1.5%;
}
#apprentice-img{
    width: 100%;
}

html css css-position overflow
person rebeccasmith_me    schedule 11.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

На изображении есть некоторая высота строки. Пытаться:

#apprentice-img{
    width: 100%;
    display:block;
}
person scgough    schedule 11.06.2015

arrow_upward
0
arrow_downward

Что ж, это правильное поведение. Когда вы устанавливаете div с абсолютным позиционированием, он выходит из «нормального» потока. Возможно, вы могли бы использовать «position:relative» и изменить способ позиционирования вашего div или использовать javascript.

person gmast    schedule 11.06.2015