I have had this problem a few times, and I always forget the reason for it, even though it’s relatively simple.
The problem : Two elements have a z-index value set for them in the sites CSS file, but the wrong one shows up on top. It doesn’t matter what you do with the values, what you set them at, nothing. It doesn’t matter.
The solution is painfully simple. All elements that have a z-index applied to them must also have a position set in the CSS rules. So, you would need to have something like this:
.element-1 {
z-index: 100;
position: relative
}
.element-2 {
z-index: 50;
position: relative;
}
That’s all there is to it, and I keep on forgetting! Hopefully this will serve as a reminder to me, and anyone else out there with the same problem.