Search code examples
htmlcsspositionz-index

Multiple Z-index Elements on One Page

Can anyone tell me how this effect is created?

Link to desired effect

Whereby the header bar and image stay static but as you scroll down the webpage the content area overlaps the image but not the header.

I thought that maybe the header and bg image and content area all have different z-index's but I just cant seem to replicate this effect.

Below is what I have been playing around with locally:

<style type="text/css">

body{
    margin:0px;
    padding:0px;
}
#head{
    width:2000px;
    height:180px;
    background-color:#666;
    position: fixed;
    z-index: 10000;
}

#image{
    width:2000px;
    height:500px;
    background-color:#F00;
}

#content{
    width:2000px;
    height:1000px;
    background-color:#090;
}
</style>

<div id="head">HEAD</div>
<div id="image">IMAGE</div>
<div id="content">CONTENT</div>
Solution

  • Set the body (or wrapping element) to have a background with:

    body { 
    background-attachment: fixed;
}

    More: http://www.w3schools.com/cssref/pr_background-attachment.asp

    This forces the background to stay put, even with page scroll.

    Then add your content into the body... It will scroll on by, while the background of the body is static.

    EXAMPLE: https://jsfiddle.net/a8qpxzy2/2/