I'm trying to track down a Z index problem. I'm looking at the page in IE9's DOM Inspector, and I just can't figure it out.
I have one element with a z-index of 10000, and another with a z-index of 7000, and yet the z-index 10000 is drawing below the z-index 7000. Clearly somewhere in the hierarchy, something is setting a stacking context, but I've been browsing up and down the hierarchy and I haven't been able to find it.
Nothing other than these two elements, so far as I can see, has a z-index set. And nothing has an opacity value set. And I'm seeing this in FF5 and IE9 (so it's not the old IE<7 stacking context bug).
Do any of the browsers have a tool that will tell me which element is setting a stacking context?
Thanks
The Z-Context Chrome extension is simple and shows:
z-index
valueBy the way:
z-index
property can affect the
stack order only if the position is explicitly set to fixed,
absolute, or relative (like aprohl5 said).