CSS Problem: Replacement for z-index?

Question

Hi Guys,

Is there any replacement for z-index?

My code is too long, thus I will briefly explain my code in text form:

My website layout is (from top to bottom):

• Banner
• Menu Bar
• Content
• Footer

In 1 of the menus, I added a SlideDown (using jquery) effect when rollover to display to submenus.

I have 5 images, right below the menu bar, => <div id='images'>. Each image under <li class="thumb">

My problem: When I roll over the menu, the submenus are behind the images. I tried all methods, debug with firebu, tested on all popular browsers, IE,FF,Chrome,Opera and Safari, none of them works. I set z-index and position: relative / absolute, but no luck.

Is there any others way to display my submenus in front of the images?

Please help

EDIT:

Hi Guys,

I fixed the problem. But its weird, and I dont understand why.

the initial css of submenu:

#submenu{
  ...
  z-index: 500;
  position: relative;
  ...
}

After I change the z-index value to 1000, it works now. I dont understand why though. The z-index for the image is -100, before and after I fixed the problems. Is there any specific reason why the value 500 does not work, while 1000 can work? I didnt use z-index on others elements(rest of the page). (Maybe I should open a new question for this). Anyway, sorry for posting this useless question here, any kind-heart soul, could you please close this thread/question?

Answer 1

It's hard to tell how you've laid out your page but here's a suggestion.

Try the following:

<div id="banner"><!--banner contents--></div>
<div id="menu"><!--menu contents--></div>
<div id="content"><!--main contents--></div>
<div id="footer"><!--footer contents--></div>

Then in css you want:

div#menu {
    position: relative;
    z-index: 10;
}

I don't like to use this many div's when making a website, but its the easiest way of getting my message across. Let me know how it goes.