css - 图像在 div 之上

Question

我有多个div

.barinfo {
float:left;
position:relative;
overflow:hidden;
width: 768px;
height: 540px;
background:#000;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
display: none;
}
.mosaic-overlay {
    z-index:5;
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
}
.details { 
margin:15px 20px; 
}   

我想要一张图片来覆盖它。该图像具有左右箭头，因此用户可以单击它以浏览上述 div。

我怎样才能使图像完全独立于任何东西，使其位于 div 之上？现在它只是被推到 div 的右侧或底部

任何方法都可以

HTML 代码:

<div id="bar5info" class="barinfo">
    <div class="mosaic-overlay"><img onload="imageLoaded()" src="images/Seg1.png" /></div>
    <div class="details">
        <h4>Lorem ipsum</h4>
        <p>Lorem ipsum</p>
    </div>
</div>
<img src="arrows.png" /> <!--the arrows ontop of the divs-->

Answer 1

将所有内容都包装在容器中，将 position:relative 放在容器上，将 position:absolute 放在箭头图像上。然后使用 left、right、top 和 bottom 属性相对于容器的网格定位箭头。

参见 Absolute Positioning Inside Relative Positioning有关此方法的概述