2013-02-26 6 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;} ' –

+0

@ Эрик Лемос Спасибо за ваш ответ. На самом деле я не знаю о 'z-index'. Но это сработало ... – james

+0

переместил комментарий к ответу –

ответ

3

z-index - это свойство 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, поскольку это именно то, что вам нужно.

Убедитесь, что вы установили индекс Z как для изображения, которое вы пытаетесь укрыть, так и для div, на котором вы его покрываете!

+0

Также поймите, что вам нужно явно указать расположение элемента. – patricksweeney

+0

Благодарим вас за ответ. На самом деле я не знаю о z-индексе. Но это сработало ... – james

1

Вы пробовали добавить z-index в свой оверлейный div? дать ему z-индекс 50 и посмотреть, работает ли это. Вы также можете дать ему абсолютное позиционирование и просто поместить его в ontop изображения div.

Смежные вопросы