Лучшее решение для текста поверх изображения

Question

Я хочу сделать следующий элемент.

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

<div class="header">
<img src="myimage.png" alt="" />
<div class="text">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
</div>

А затем установите .header в положение относительное, img в max-width 100% и .text в положение абсолютное, внизу: -50%, влево: 10% и т. Д. Но это плохо масштабируется, и мне кажется, что абсолютная позиция немного неверна в отношении отзывчивости. Кроме того, под элементом есть контент, который должен перемещаться в соответствии с объемом текста в текстовом элементе. Если if позиционируется как абсолютное, управление становится более сложным.

Есть идеи для другого подхода?

Answer 1

Попробуйте это :

img {
    border: 2px solid black;   
}

#container {
    position: relative;    
}

#example {
   position: absolute;
   top: 10px;
   left: 10px; 
    
   padding: 5px;
   background-color: white;
   border: 2px solid red;
}

<div id="container">
    <img src="http://i34.tinypic.com/4tlkci.jpg">
    <div id="example">This is my div</div>
</div>