Problem with div and Z-index tag

Question

I am creating a page that will be loaded to another page via ajax. It has a top bar and a table below it, which is inside the jquery scroll plugin.

The problem that I seem to encounter is that the top panel has a shadow below it, which you can only see when scrolling below the table in white rows (white because they have no background).

Here is the demo in question (best checked with firebug)

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

I made a small image of what I'm saying :)

Answer 1

You cannot set the superscript z without setting its position relative to relative or absolute. Applied "position: relative; on # content-placeholder fixed it to me.

Answer 2

This works for me in firebug.

table.tablesorter tbody tr.odd { box-shadow: 0 0 5px 0 #BABABA; position: relative; z-index: -1; } table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #EAEAEA; border: 1px solid #FFFFFF; font-size: 8pt; padding: 4px; position: relative; z-index: -1; }