Issue with div shadow and Z-index

Question

I am creating a page what will be loaded into another page via ajax. It has a top bar and a table below it that is located inside a jquery scrollbar plugin.

The problem I seem to be having is that the top bar has a shadow below it that you can only see when the below table is scrolled over the white rows (which are white because they have no background).

Here is the demo in question (best to inspect with firebug)

I tried setting the z-index of the top bar without luck. I also tried setting the z-index of the jquery scrollbar div - which worked, but it broke the ability to click the table rows.

I made a little image of what I'm talking about :)

Answer 1

You can't set top bar's z-index without setting it's position to relative or absolute first. Applied "position: relative;" to #content-placeholder fixed it to me.