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