Menu
I have a div with default positioning (i.e. position:static) and a div with a fixed position.
If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.
#over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div id="under"> </div> </body> </html>Or on jsfiddle here: http://jsfiddle.net/mhFxf/
I can work around this by using position:absolute on the static element, but can anyone tell me why this is happening?
(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it doesn't have a satisfactory answer, hence I am asking this here with my example code)
701
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).
You set z-index on a static element By default, every element has a position of static. 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.
Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
Yes: use position:relative; z-index:10 . z-index has no effect for position:static (the default).
This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.
The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order
- The stacking context’s root element (the
<html>element in this case)- Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
- Non-positioned elements (ordered by appearance in the HTML)
- Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
- Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
So you can
#under positioned -ve z-index appear behind non-positioned #over element#over to relative so that rule 5 applies to it Developers should know the following before trying to change the stacking order of elements.
<html> element is the root element and is the first stacking contextThe Stacking order and stacking context rules below are from this link
<html> element)The order of elements:
<html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
29
Add position: relative; to #over
#over { width: 600px; z-index: 10; position: relative; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #f0f; z-index: 1; } <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div id="under"></div> </body> </html>Fiddle
106
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
