Menu
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 as a 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.
940
You don't need to apply z-index and position to create a new stacking context. You can create a new stacking context by adding a value for properties which create a new composite layer such as opacity , will-change and transform . You can see a full list of properties here.
The root element always holds a root stacking context. This is why you can start arranging elements without having to position the root element first.
The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
Open the command menu ( ctrl + shift + P or cmd + shift + P ). Type 3D and press Enter. In the new panel that opens, switch between the 3 modes: z-index, DOM, and Composited Layers to visualize the page in 3D.
If you use Chrome https://github.com/gwwar/z-context is a simple extension to see:
- If the current element creates a stacking context, and why
- What its parent stacking context is
- The z-index value
and important, like aprohl5 said: The z-index property can affect the stack order only if the position is explicitly set to fixed, absolute, or relative.
This is a nice way to mantain order with Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
