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

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

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

Answer 3

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

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

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