z-index not working with fixed positioning

Question

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   x000D   x000D       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        x000D       lt  DOCTYPE html gt       lt html gt          lt body gt             lt div id  over  gt               Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello            lt  div gt               lt div id  under  gt             lt  div gt          lt  body gt       lt  html gt  x000D   x000D   x000D   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

User · Accepted Answer

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.

Solutions

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

set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

When a stacking context is formed
- By default, the <html> element is the root element and is the first stacking context
Stacking order within a stacking context

The Stacking order and stacking context rules below are from this link

When a stacking context is formed

When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Stacking Order within a Stacking Context

The order of elements:

The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
- You cannot put a child element behind a root stacking context element
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)

User · Answer

Give the  under a negative z-index  e g  -1  This happens because the z-index property is ignored in position  static   which happens to be the default value  so in the CSS code you wrote  z-index is 1 for both elements no matter how high you set it in  over   By giving  under a negative value  it will be behind  any z-index  1  element  i e   over

User · Answer

When elements are positioned outside the normal flow  they can overlap other elements    according to Overlapping Elements section on http   web archive org web 20130501103219 http   w3schools com css css positioning asp

User · Answer

I was building a nav menu  I have overflow  hidden in my nav s css which hid everything  I thought it was a z-index problem  but really I was hiding everything outside my nav

User · Answer

the behaviour of fixed elements  and absolute elements  as defined in CSS Spec      They behave as they are detached from document  and placed in the nearest fixed absolute positioned parent   not a word by word quote    This makes zindex calculation a bit complicated  I solved my problem  the same situation  by dynamically creating a container in body element and moving all such elements  which are class-ed as  my-fixed-ones  inside that body-level element

User · Answer

z-index only works within a particular context i e  relative  fixed or absolute position   z-index for a relative div has nothing to do with the z-index of an absolutely or fixed div   EDIT This is an incomplete answer  This answer provides false information  Please review  Dansingerman s comment and example below

User · Answer

since your over div doesn t have a positioning  the z-index doesn t know where and how to position it  and with respect to what    Just change your over div s position to relative  so there is no side effects on that div and then the under div will obey to your will   here is your example on jsfiddle  Fiddle  edit  I see someone already mentioned this answer

User · Answer

Add position  relative  to  over   x000D   x000D       over   x000D        width  600px  x000D        z-index  10  x000D        position  relative      x000D        x000D       x000D       under   x000D        position  fixed  x000D        top  5px  x000D        width  420px  x000D        left  20px  x000D        border  1px solid  x000D        height  10   x000D        background   fff  x000D        z-index  1  x000D        x000D       lt  DOCTYPE html gt  x000D       lt html gt  x000D       lt body gt  x000D        lt div id  over  gt  x000D        Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello x000D        lt  div gt    x000D       x000D        lt div id  under  gt  lt  div gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D    Fiddle

[css] z-index not working with fixed positioning

Solutions

The Real Problem

When a stacking context is formed

Stacking Order within a Stacking Context

Examples related to css

Examples related to z-index