I have a table with a bunch of cells. (No way! Amazing! :P) Some of the cells have a small div that when you put your mouse over, it gets bigger so you can read all the text. This works well and all. However, since html elements that come later in the document have a higher z-index, when the div gets bigger it is underneath the other divs in the other cells.

Some html code:

<table>
<tr>
  <td>
    limited info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        informative long text is here
      </div>
    </div>
  </td>
  <td>
    some short info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        longer explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
  </td>
</tr>
</table>

Some js code:

function tooltipshow(obj)
{
    obj.style.width = '30em';
    obj.style.zIndex = '100';
}

function tooltiphide(obj)
{
    obj.style.width = '1em';
    obj.style.zIndex = '20';
}

It doesn't matter if I set z-index dynamically to something higher onmouseover. It's like z-index has no affect. I think it has something to do with the table.

I've tested this in FF3. When I'm feeling particularly macho, I'll test it in IE.