Search code examples
jquerycssyuivisual-glitch

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

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:

enter image description here

Solution

  • 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 */
}