2013-02-26 2 views
0

이미지 위에 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; 
} 

보여줍니다. 이미지 위에 부분을 표시해야합니다 ... enter image description here

제발 누구든지이 물건을 어떻게 할 지 말해 주십시오 ........ 감사합니다. ...

+1

시도'#changeBackPicture {위치 : 상대; z-index : 9999;}' –

+0

@ Eric Lemos 답장을 보내 주셔서 감사합니다. 사실 나는'z-index'에 대해서 모른다. 그러나 그것은 작동했습니다 ... – james

+0

대답을 –

답변

3

z- 색인은 특정 요소의 스택 순서를 설정하는 CSS 속성입니다. 스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 다른 요소 앞에 있습니다.

요소가 z- 인덱스를 사용하려면 절대 위치, 상대 위치 또는 고정 위치에 있어야합니다.

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

자원 : http://www.w3schools.com/cssref/pr_pos_z-index.asp

+0

당신의 대답에 감사드립니다. – james

2

정말 복잡하지는 않습니다. Z Index CSS Property을 꼭 봐야합니다.

표지하려는 이미지와 덮고있는 div의 Z 색인을 모두 설정했는지 확인하십시오!

+0

으로 이동했습니다. 또한 요소의 위치를 ​​명시 적으로 명시해야 함을 알고 있습니다. – patricksweeney

+0

답변 해 주셔서 감사합니다. 사실 나는 Z- 색인에 대해 모른다. 그러나 그것은 ... – james

1

오버레이 div에 Z- 색인을 추가하려고 시도하셨습니까? Z- 인덱스를 50으로 지정하고 작동하는지 확인하십시오. 절대 위치 지정을하고 이미지 div의 꼭대기에 배치 할 수도 있습니다.

관련 문제