15 Jul

IE z-index bug

I was helping hostyle out with a puzzling z-index problem. An element he had given a z-index:100 was appearing below another element of z-index:0.

Finally, we managed to find the problem. It appears that if you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other.

Here is an example of the bug. Note that Firefox displays it correctly, while IE does not.

Firefox screenshotIE screenshot

To solve it, try to keep the layered elements within the same position:relative context. Other than that, I’m not sure of a workaround.