z-index not working properly

Question

So I am making a site and I have a top bar with some box shadow. I then have a description box directly underneath. So I set the z-indexes to ensure that the top bars box-shadow would go over the description box with the following css:

#topbar{
    z-index:9999 !important;
}
#description{
    margin-top:0px;
    z-index:-1 !important;
}

jsfiddle

you will notice if you change the margin-top, you can see that the shadow is being hidden underneath the description still!

why is this happening and how can I fix it?

note: neither element can have fixed or absolute positioning

Answer 1

Add position: relative to both elements. z-index only affects positioned elements.

Updated JSFiddle: http://jsfiddle.net/BAW23/3/