How to position a DIV tag to hover (z-index) over a table cell

Question

This sounds like it should be easy but for some reason it's not work as I would expected it. I have HTML that looks roughly like this:

<TD align="center">
<DIV style="position: relative; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

Basically I want that DIV tag to hover over (z-index, not vertically on top of) the cell and then mess with the opacity and color of the DIV so that it looks like the entire cell is disabled (instead of just the SELECT tag).

The back story for this is that I want to disable the SELECT tag and then provide a tooltip to explain to the user why it's disabled. The trouble is once I disable the SELECT tag it also disables the mouseover event so I can't do a tooltip.

Any help on this would be great!

Answer 1

I believe something along these lines will work:

<TD align="center" style="position: relative; z-index: 1;">
<DIV style="position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%">
</DIV>
<SELECT DISABLED>
<OPTION>Option 1
<OPTION>Option 2
</SELECT>
</TD>

The positioning on your div won't work right unless the parent element is also positioned