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

Question

У меня есть абсолютный позиционный div (содержит некоторый текст) в относительном div (содержит изображение), и он установлен в нижнее: 0px; однако абсолютный div переполняется ниже изображения. Я не могу исправить эту проблему, я попытался применить переполнение: скрытый для относительного 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%; 
} 

Answer 1

Там какая-то высота строки на изображении. Попытка:

#apprentice-img{ 
    width: 100%; 
    display:block; 
} 

Answer 2

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