Question

I am having an issue positioning a div that I’ve styled using CSS in front of an image slideshow created using the innerfade.js script found at http://medienfreunde.com/lab/innerfade/.

I have created an image rollover using a div, and using CSS to set a background image for it that changes to a second image on mouse over. However, when I try to position it over the innerfade.js slideshow, it goes behind it, not in front. I have the positioning for the div set to absolute and am using the margin-top and margin-left properties to position the div.

My question is this – How could I change my code so that the div containing the background images would be in front of the image slideshow?

I have my code for the button in a jsFiddle at http://jsfiddle.net/Cwca22/SejUx/ – the jquery.innerfade.js script can be found from the website listed previously. (I’m using the ‘portfolio’ example included in the script’s documentation.)

Answer 1

Try applying a large z-index value to .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
}