2013-02-26 45 views
0

我試圖在圖像上顯示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; 
} 

下面圖爲師現在怎麼顯示。我需要顯示在圖像上的劃分... enter image description here

請任何人告訴我怎麼做這個東西........謝謝。 ...

+1

嘗試'#changeBackPicture {位置:相對; z-index:9999;}' – 2013-02-26 20:47:48

+0

@Eric Lemos謝謝您的回覆。其實我不知道'z-index'。但它的工作... – james 2013-02-26 20:51:54

+0

感動的評論回答 – 2013-02-26 20:55:41

回答

3

z-index是一個CSS屬性,用於設置特定元素的堆棧順序。堆棧順序較大的元素始終位於堆棧順序較低的另一元素之前。

爲了讓元素使用z-index,它必須被定位爲絕對,相對或固定。

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

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

+0

謝謝你的回答 – james 2013-02-26 20:58:02

2

這真的不是那麼複雜,你應該看看Z Index CSS Property,因爲它完全符合你的要求。

請確保您爲要覆蓋的圖像和覆蓋它的div設置Z索引!

+0

此外,意識到你需要明確說明元素的位置。 – patricksweeney 2013-02-26 20:51:39

+0

謝謝你的回答。其實我不知道z-index。但它的工作... – james 2013-02-26 20:52:29

1

你有沒有嘗試添加一個z-index到你的覆蓋div? 給它一個50的Z指數,看看是否有效。 你也可以給它絕對定位,並把它放在圖像div的頂部。

相關問題