Z-index not working

Question

Take a look at this page I'm working on: http://s361608839.websitehome.co.uk/textcube/

The nav bar is going behind the slider and I wanted it to sit above instead. I've tried setting a high z-index on the #navbar and #navbar-inner and nothing happened.

#navbar{
background: url(../images/nav-bg.png) repeat-x;
height: 55px;
margin: 0;
padding: 0;
z-index: 9999;
}
#navbar-inner{
width: 912px;
margin: 0 auto;
position: relative;
z-index: 9999;
}

I think the javascript slider using CSS style .bx-window and .bx-window are the cause however I have set a low z-index on both, yet I don't see any difference.

Help with this would definately be appeciated.

Cheers

Answer 1

z-index works only with positioned elements (position:absolute, position:relative).

Here's an article http://www.w3.org/TR/CSS2/visuren.html#z-index

In your case, you forgot to add position to one of your element.

Answer 2

Add position:relative to #navbar