Menu
An element that has a high z-index may below another element that has a low z-index, only because the ancestors' z-index of the lower one provides a higher stacking context for this element.
Because of this, it's impossible to overlay an element from a lower stacking context without a major change in the CSS or HTML code. On the other hand, using the z-index property would be simples if it would be an "absolute" value (higher z-index -> higher position on the z axis).
My question is, why was this implemented this way in the browsers and the standards?
834
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.
An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
z-index only works on positioned elements. If you try to set a z-index on a non-positioned element, it will do nothing. However, there is one exception - flex children can use z-index even if they're non-positioned.
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
I think cwolves has the proper answer, and the way it is now it's probably the most logic. To help understanding you can think of z-index like Photoshop layers. If you have a folder of layers above another folder, the wrapped layers can't obviously be arranged outside their parents, unless you move them from a folder to another.
Or think of boxes: you can arrange things inside a box, but you can't arrange things from two different boxes, unless you move them from a box to another.
If you're running into the case where you need a different arrangement, you probably need to re-think your markup to allow this.
198
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
