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
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 screenshot||IE 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.