CODEWITHSUNDEEP
cssz-index
Łukasz Zaroda
Łukasz Zaroda

Reputation: 767

How to position main content below header and footer in css

I have this piece of html:

<html>
    <body>
        <header></header>
        <div></div>
        <footer></footer>
    </body>
</html>

and this piece of css:

header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

div {
    width: 500px;
    height: 700px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

You can see this also here: http://jsfiddle.net/XGTtT/ Basically, I would like to have yellow area below other two areas, but z-index doesn't seem to work. What is wrong and how to fix it?

Upvotes: 2

Views: 25089

Answers (3)

Matheus Azevedo
Matheus Azevedo

Reputation: 898

header {
    width: 500px;
    height: 100px;
    background: red;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    top:0;
}

div {
    width: 500px;
    height: 450px;
    background: yellow;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    position: absolute;
}

footer {
    width: 500px;
    height: 50px;
    background: blue;
    box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/XGTtT/8/

Upvotes: 1

Rick Donohoe
Rick Donohoe

Reputation: 7271

To achieve elements which are positioned in front or below each other you will need to use a mix of absolute positioning and z-index, as z-index will not currently work with the default positioning, which is static.

Depending on what you want to achieve it may be easier to add position: relative to the divs, and then use a negative margin on the div to pull it up/below the header and footer.

Upvotes: 3

naresh kumar
naresh kumar

Reputation: 2241

Higher number will come front, lower number will go back. A nd give some different number for each element. Like for div 1, for header 2 and for footer 3.

Upvotes: 0

Related Questions