我正在尝试在图像上显示div。当用户输入图像时必须显示分区,表示悬停效果。但是当我将鼠标悬停在主分区上时,显示在图像下方的div。
我的代码是:
<div class="bgimg">
<img width="100%" height="100%" data-id="1" src="data:image/jpeg;">
<div id="changeBackPicture" style="display: none;">
<a id="ChangeBAKPicture" href="javascript:void(0)">Change BackGround Picture</a>
</div> <-- This division need to display above the image --->
<div class="primg"></div>
<div id="uname">xyz </div>
</div>
css代码:
#changeBackPicture
{
float:right;
margin-top:-70px;
margin-right:500px;
width:270px;
height:35px;
margin-left:-3px;
margin-right:-3px;
}
下图显示该部门现在如何显示。我需要在图像上显示分割...
请有人告诉我怎么做这个东西........谢谢。 ...
答案 0 :(得分:3)
z-index是一个CSS属性,用于设置特定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的另一个元素的前面。
为了使元素使用z-index,必须将其定位为绝对,相对或固定。
#changeBackPicture { position: relative; z-index: 9999;}
答案 1 :(得分:2)
真的不是那么复杂,你应该看一下Z Index CSS Property,因为它完全符合你的要求。
确保为要覆盖的图像和覆盖它的div设置Z索引!
答案 2 :(得分:1)
您是否尝试在叠加div中添加z-index? 给它一个50的z指数,看看是否有效。 你也可以给它绝对定位,然后把它放在图像div的顶部。