Наложение Div на изображение

Question

Итак, у меня есть <div> с относительным позиционированием, и у него есть ребенок <img> с абсолютным расположением.

<div style="position: relative;"> 
    <img src="image.png" style="position: absolute;" /> 
    <span id="overlay_text">OVERLAY</span> 
</div> 

Проблема заключается в том, что она должна быть в верхней (выше по оси Y, или ближе к верхней части экрана), но она измеряется только в расстоянии от дна.

Answer 1

Использовать z-index и top. Это сложит div внизу, изображение, а затем верхний слой (наложение). Чтобы установить позиционирование с верхнего края, используйте top, который можно использовать с отрицательными номерами, если вам нужно, чтобы он был выше по оси Y, чем его родитель. Пример ниже приведет к перемещению диапазона 10px над верхней частью его родительского div.

<div style="position: relative; z-index: 1;"> 
    <img src="image.png" style="position: absolute; z-index: 2;" /> 
    <span id="overlay_text" style="position: relative; top: -10px; z-index: 3;">OVERLAY</span> 
</div> 

Answer 2

Зависит от того, что вы ищете точно, но простой пример, основанный на ответ @Joe Конлин было бы добавить отрицательное верхнее значение.

Также небольшая коррекция на @Joe Conlin, пролет должен иметь положение абсолютное, не относительное, я думаю.

http://jsfiddle.net/KevinFarrugia/fj83ytwp/1/

<div class="parent"> 
    <img src="http://www.gstatic.com/webp/gallery/1.webp" /> 
    <span class="overlay">OVERLAY</span> 
</div> 

CSS:

.parent{ 
    position: relative; 
    margin: 2em; 
} 

.parent img{ 
    position: absolute; 
} 

.parent .overlay{ 
    position: absolute; 
    top: -1em; 
    text-align: center;  
    width: 100%; 
} 

Answer 3

Это в некоторых случаях является лучшим решением, чтобы родительский DIV получает высоту изображения:

<div style="position: relative; z-index: 1;"> 
    <img src="image.png" /> 
    <span style="position: absolute; top: 0px; z-index: 3;">OVERLAY</span> 
</div>