Text displays on top of covering div in spite of z-index - Chrome & Firefox

Question

I'm experiencing the strangest issue. I've been banging at this one for over an hour no but to no avail.

I have a div with text, with this CSS:

    z-index:  1;
    position: relative;

I have a covering dialog box (YUI) with this CSS:

    background: #fff;
    position:   absolute;
    z-index:    200;

The box slides down in an animation.

For some reason, the text is displaying over the other div until—get this—I move the mouse outside the window. Then it all works perfectly.

My best guess is that this is a rendering issue. But it happens in both FF and Chrome (latest). Any suggestions would be helpful.

-

Screenshot:

Answer 1

I magically fixed this. Hope this helps someone in the future.

Buy explicitly specifying a z-index for a parent element, this solved the issue:

.yui-skin-sam .yui-dt table {
    width: 100%;
    z-index: 1;         /* <-- added */
    position: relative; /* <-- added */
}