Wie positioniert main Inhalt unter header und footer in css

Habe ich dieses Stück html:

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

und dieses Stück 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;
}

Können Sie sehen, dieses auch hier: http://jsfiddle.net/XGTtT/ Grundsätzlich würde ich gerne gelben Bereich unterhalb der beiden anderen Gebiete, aber z-index scheint nicht zu funktionieren. Was ist falsch und wie man es beheben?

z-index funktioniert nur, wenn Sie eine position Verschieden von static ist.

InformationsquelleAutor | 2012-10-25

  1. 2

    Zur Erreichung Elemente, die positioniert sind in der Vorder-oder unter jeder anderen, werden Sie brauchen, um eine Mischung aus absoluter Positionierung und z-index, z-index aktuell nicht arbeiten mit der Standard-Positionierung, die ist statisch.

    Je nachdem, was Sie erreichen wollen, kann es einfacher sein, fügen Sie position: relative um die divs, und verwenden Sie dann eine negative Marge auf das div-ziehen Sie Sie nach oben/unten die Kopf-und Fußzeile.

    InformationsquelleAutor Rick Donohoe

  2. 1
    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/

    InformationsquelleAutor Matheus Azevedo

  3. 0

    Höhere Zahl kommen, vordere, untere Zahl zurück gehen wird. Ein
    nd einige andere Nummer für jedes element. Wie für die div 1, überschrift 2 und Fußnote 3.

    InformationsquelleAutor naresh kumar

Schreibe einen Kommentar