Не могу поместить div над изображением

Question

привет, я пытаюсь поместить div над изображением. Я не могу разместить это изображение в качестве фонового изображения, потому что это изображение будет реагировать. Я пытаюсь следующий CSS,

#slider { 
    margin:0 33%; 
    width:67%; 
    position:relative; 
} 

#slider img { 
    width:100%; 
    height:auto; 
} 

#slider #caption { 
    position:absolute; 
    width:100%; 
    height:50px; 
    background-color:#fff; 
    opacity:.4; 
    z-index:2; 
} 

---

<div id="slider"> 
    <img src="~/Content/Home/banner.jpg" /> 
    <div id="caption">President Installation</div> 
</div> 

кто-нибудь может сказать, где ошибка .. Спасибо

Answer 1

В top и left стилей можно расположить этот элемент, из-за position:absolute:

#slider #caption { 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    height:50px; 
    background-color:#fff; 
    opacity:.4; 
    z-index:2; 
} 

JSFiddle

Answer 2

Если #caption div должен сидеть над img, вам нужно сначала установить положение изображения.

#slider img { 
width:100%; height: auto; 
position:relative 
} 

Answer 3

Просто установите верхнее положение надписи. См Live demo

#slider #caption { 
    position:absolute; 
    width:100%; 
    height:50px; top:200px; 
    background-color:#fff; 
    opacity:.4; 
    z-index:2; }