html - 不能将 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

只需设置标题的顶部位置。观看现场演示

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

Answer 3

如果#caption div 位于img 上方，则需要先设置图像的位置。

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