Slideshow image shows up in front of Modal window - updated with jsfiddle

Question

Kind of stuck here.

Based on Hanish feedback - I have created a Jsfiddle to replicate the issue I'm facing

http://jsfiddle.net/BY4fu/10/

Will appreciate if anyone can help me debug

I am using the following plugin for the slideshow

http://jquery.malsup.com/cycle/basic.html

Now on the same page I am displaying text in a modal window - when a user clicks on certain links. This is the plugin I'm using for the modal window

http://rmcreative.ru/playground/modals_plugin/demo.html

Now the issue is - when the modal window opens up - the images from the slideshow are on top of the modal window and not behind

Based on dalefrench feedback I tried using z-index - but no luck

.modal {

z-index:1000;
background: #fff;
width: 600px;
margin: 20px auto;
border-radius: 30px;
border: 6px solid #000;
padding: 20px;  
text-align:justify;

}

.slideshow img { padding:5px; background-color:#000; z-index:10; }

Thanks for your time - appreciate it

Answer 1

Try giving your .slideshow element a position value of position:relative and the same for .modal. Then give the .slideshow element a z-index: -1 value.

Updated the fiddle: http://jsfiddle.net/BY4fu/6/

.slideshow {
    height: 125px;
    width: 232px;
    margin-left:20px;
    position: relative;
    z-index: -1;
}

 .modal {
    z-index:1000;
    background: #fff;
    width: 300px;
    margin: 20px auto;
    border-radius: 30px;
    border: 6px solid #000;
    padding: 20px;
    text-align:justify;

}

Answer 2

Z-index will come to your rescue. Also check if your modal position is fixed or if the modal is within an element whose position is fixed. If thats the case make the position of modal to default position. For more infoormation on Z-index check this link

Answer 3

Give the modal a higher z-index than the slideshow. Think of z-indexes as layers. 1 being above 0.

.modal {
z-index:1000;
background: #fff;
width: 600px;
margin: 20px auto;
border-radius: 30px;
border: 6px solid #000;
padding: 20px;  
text-align:justify;}

.slideshow img{
z-index:10;}

Answer 4

How about using z-index? Can you jsfiddle your current code?

http://jsfiddle.net/Qg5Ts/1/

    .modal {
        position:relative;
        z-index:1000;
        background: #fff;
        width: 300px;
        margin: 20px auto;
        border-radius: 30px;
        border: 6px solid #000;
        padding: 20px;
        text-align:justify;
    }