IE7's z-index bug, a complex case

Question

I have a popup window with form fields and dynamic tooltips. In every browser the tips show up fine, but in IE6/7 they show up below the form fields. Classic bug, but I can't find a solution that works.

Here's a screenshot , Firefox 5 on top and IE7 on bottom.

Without delving into the code too much, the form has the following nested structure:

div.pp (position: absolute; z-index: 200)
  -> div#le, div#ri
    -> label (position: relative)
      -> span.tip (position: absolute; z-index: 300)

Note that span.tip's are dynamically generated and injected into the labels, making them siblings with the inputs.

EDIT: Here is a demo .

Answer 1

Generally speaking, in IE<8 the z-index of your relatively positioned parent element must be higher than the z-index of the relatively positioned span element you want to overlay.

In your case, I'd try to give the relatively positioned span a z-index. But without the whole HTML context it is hard to tell.

EDIT : After looking at the demo I'd try giving the relatively positioned labels on the left a z-index higher than the ones on the right:

.pp .le label{z-index: 10}
.pp .ri label{z-index: 5}

Answer 2

The problem was IE re-creating z-indexes for children of relatively positioned elements, making it impossible to set z-indexes for different tool tips relative to one another.

The solution lay in simplifying the page for IE. I nixed the relative positioning on the labels, absolutely positioned the tooltips relative to div.pp, and used javascript to correctly position the anonymous tooltips and dynamically set z-indexes. When the z-indexes for the tips were lower than those for their parent (div.pp) the tips displayed correctly.