Trouble with z-index in ie6 and 7

On this page http://equals.lsri.nottingham.ac.uk/puzzle/create, if you type something into an input and then click save a cus开发者_运维知识库tom 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?

---

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.

---

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.

---

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:

• Squish the Internet Explorer Z-index Bug
• IE7 Lessons Learned: The z-index bug

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!