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;
}
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:
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.