On this page http://equals.lsri.nottingham.ac.uk/puzzle/create, if you type something into an input and then click save a custom dialog will pop up. But even though the dialog's z-index, and that of its container, are higher than that of the equation editor, the editor still overlaps the dialog in ie6 and 7. Anyone got any idea why?
A:
Because in IE 6 and 7S, stacking works differently. See Bug report: Explorer z-index bug on quirksmode.org, and the comments for some solutions.
Pekka
2010-03-09 22:06:09
I thought I had this covered though - both #equationEditor and #dialog have the same parent (body), and I've given them z-index 20 and 50 respectively, tehn #dialog .inner has z-index 90. I've come across the ie bug before but not when being so explicit with z-indices
wheresrhys
2010-03-10 08:08:47
+1
A:
z-index is relative to its container. So if something is absolutely positioned, it's container is the window, but if it's relatively positioned its z-index is relative to only the other things in that container. So the highest it could be in the window is whatever it's parent is. If your overlapping element is absolute, you either need the new elements container at a higher z-index or absolutely position the new elements.
Alex Sexton
2010-03-09 22:07:34
A:
Hey, wheresrhys. Oh, the simple joy that is Internet Explorer... The problem stems from the fact that IE7 (and earlier) resets the z-index of absolutely positioned elements.
Some literature on the issue:
The two popular modes of thought seem to either be correction through JavaScript (both Prototype and jQuery have solutions listed in the second article), or by wrapping the absolutely positioned element you want on top in a not absolutely positioned parent that has a high z-index. Hth!
Impirator
2010-03-09 22:22:56