All sections show over fixed header when scrolling

Question

I have a fixed header at the top of all sections in home page. but when i am scrolling, all contents and sections goes over(above) the fixed header and the header remains like a background.

How to fix this that all images and contents go under the fixed header?

CSS

#header-wrapper { 
   width:100%; 
   float:none;
   background:#09f;
   z-index:999px;
   position:fixed;
   top:100;
}

Answer 1

I think there is some problem with z-index as per your description

This might help

Mobile WebKit and Chrome 22+, a new stacking context is created by position: fixed, even when z-index is auto.

So the stacking context hierarchy looks like this:

• document root (z-index 0)
  • #element (z-index 9998)
  • #element2 (z-index 0)
    • .aboveElement (z-index 9999)
    • .belowElement (z-index 9997)

You cannot compare 9998 with 9999 or 9997 to determine stacking order. Instead, 9999 is compared with 9997 to determine which of .aboveElement and .belowElement is further in front, and then once everything inside #element2 is stacked in that context, it's treated as a single layer at z-index 0 which gets stacked behind #element at z-index 9998.

Read the stacking context in mozilla

Read the stacking change for fixed elements in Chrome.

Answer 2

Try using this

position: fixed;
Top: 100px;
left: 0;
z-index: 9999;

Answer 3

Use

   position: fixed;

to the parent element of the fixed header and this should work

Answer 4

z-index property should be simply integer value without px, it cannot have units because it simply specifies order of an element.

Have a look here