html - 如何显示其他元素的划分

Question

我正在尝试在图像上显示一个 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;
}

下图显示了分区现在的显示方式。我需要在图像上显示除法...

请任何人告诉我如何做这些东西........谢谢。 ...

Answer 1

z-index 是一个 CSS 属性，用于设置特定元素的堆叠顺序。具有较高堆栈顺序的元素始终位于另一个具有较低堆栈顺序的元素之前。

为了让元素使用 z-index，它必须是绝对定位、相对定位或固定定位。

#changeBackPicture { position: relative; z-index: 9999;}

资源:http://www.w3schools.com/cssref/pr_pos_z-index.asp