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 CODE：

<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

Answer 2

是的，您可以使用position:absolute使图片独立于所有＆amp;相应地使用...但更具体地说，html代码将很好地工作....谢谢

Answer 3

您可以使用position:absolute从页面中删除图片，然后使用top:__px和left:__px将图片放置在页面中。

如果要将位置引用到元素，则必须将position:relative添加到这些元素。

div上面的图像

3 个答案: