Z-Index: Divs still overlap in the wrong order (browserwide)

Question

Hi,

I can't select one of those dropdrown-links, although the #header div has a higher z-index than the rest. All relevant divs are in the same level but do not align properly:

http://img32.imageshack.us/img32/4245/zindex.png

        <div id="header">
            <div id="navigation">
            </div>
  </div>  
  <div id="sidebar"></div>
  <div id="content">
                           ...
  </div>


#header {
 width: 915px;
 height: 76px;
 z-index: 5;
}
#content {
 width: 677px;
 height: 412px;
 margin-left: 202px;
 z-index:1;
}

#sidebar { 
    float: left;
    width: 200px;
    height: 448px;
    z-index: 2;
}

#navigation {
    height: 28px;
    width: 915px;
    float: right;
 }

Answer 1

z-index only applies to positioned (i.e. position: /* not static */) elements.

Change the positioning property valud.

Answer 2

Add position relative to the elements that need to obey z-index. From w3schools.com

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Although, from your image I do not see a reason to be using z-index other than maybe the drop down navigation.