Div появляется за изображениями jquery.innerfade.js?

Question

У меня возникла проблема с позиционированием div, стилизованного с помощью CSS, перед слайд-шоу изображений, созданным с использованием сценария innerfade.js, найденного по адресу http://medienfreunde.com/lab/innerfade/.

. Я создал ролловер изображений с помощьюdiv и использование CSS, чтобы установить для него фоновое изображение, которое при наведении мыши на второе изображение.Однако, когда я пытаюсь расположить его над слайд-шоу innerfade.js, оно идет позади него, а не впереди.У меня есть положение для div, установленное на absolute, и я использую свойства margin-top и margin-left для позиционирования div.

Мой вопрос такой: как я могу изменить свой код так, чтобы divс фоновыми изображениями будет перед слайд-шоу изображений?

У меня есть код для кнопки в jsFiddle на http://jsfiddle.net/Cwca22/SejUx/ - скрипт jquery.innerfade.js можно найти на сайте, указанном ранее,(Я использую пример «портфолио», включенный в документацию сценария.)

Answer 1

Попробуйте применить большое значение z-index к .exploreButton:

.exploreButton {
    background-image: url('http://f.cl.ly/items/0w082s253z2j1r3E3C3x/explore.png');
    background-repeat: no-repeat;
    width: 216px;
    height: 52px;
    margin-top: 10px;
    margin-left: 25px;
    cursor: pointer;
    z-index: 9999;   // heres the trick
}   

Answer 2

У вашего jsfiddle нет показанного вами слайд-шоу, но похоже, что вам просто нужно установить z-index элемента #exploreButton на что-то более высокое, чем у слайд-шоу.

• https://developer.mozilla.org/en/Understanding_CSS_z-index
• https://developer.mozilla.org/en/CSS/z-index

Вот пример использования z-index: http://jsfiddle.net/SejUx/1/

Answer 3

Посмотрите на свойство CSS z-index.

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