CODEWITHSUNDEEP
cssjsp
user974047
user974047

Reputation: 2295

jsp table items get hidden behind overlapping table

I have a jsp page with a menu bar in the top portion of the page and a table on the bottom portion of the page. The menu bar is expanded with menu items (<ul>) that contains a list of items. The table on the bottom portion has a header row like this:

<td style='text-align:center; position:relative;  vertical-align:middle;'>
                <span style="position:absolute;top:0;right:0;">
                    <a href="javascript:columnUIAction(<%=columnCounter++%>, false);" tabindex="80"><img title="Close" alt="Close Column" src='<%=servernamepath%><%=closeButtonPath %>' /></a>
                </span><span style="width:100%;clear:both;"></span>
                <b><a title="Sort" href="javascript: setSortableFieldAndSubmit('field1');" tabindex="80">Field1</a></b>
            </td>

And the issue that I'm facing right now is if the list of items in the menu is large enough such that the list of items goes down and reaches the header row of the table (or go pass the header row), it will be hidden behind it; the header column appears in front of the item in the menu list. I thought adding z-index to the header row would fix the issue but that didn't work. Is there something that I'm missing in the CSS portion?

Upvotes: 1

Views: 926

Answers (1)

Jalayn
Jalayn

Reputation: 9284

You had the right idea with the z-index property, but it should be set both for your header row and your bottom table, otherwise I don't think it's going to work properly.

I made a fiddle with part of your example with two tables, and one getting bigger and displayed above the other when you hover over it.

You might also be interested with this article explaining very well how it works.

Upvotes: 3

Related Questions