Hallo,
Ik zou graag willen dat een div vóór een andere div komt te staan in CSS. Nou lukt mij dit niet goed met z-index.
De div #roze moet dus voor #footer komen.

Code:

#roze {
    clear: left;
    width: 866px;
    position: relative;
    bottom: -50px;
    top: 100px;
    z-index: 2;
}
#footer {
    background: #3a506a;
    border-top: 3px solid #2a3f52;
    width: 100%;
    height: 70px;
    text-align: center;
    color: #fff;
    clear: left;
}

Nou lukt dit wel als ik bij #roze top: -50px; doe, maar dan staat #roze weer te hoog, zodat #roze niet in 'aanraking' komt met #footer.

Wellicht kan dit je helpen:
http://www.gigadesign.be/2006/04/werken-met-z-index/

Ik heb hier al een artikel over gelezen en toen ben ik ook al wat verder gekomen. Maar nu is het probleem dat die div #roze dan niet meer naar onder gaat.

Als je die position: relative; in #roze eens veranderd in position: absolute; ?

Daarbij in de footer position: relative; en z-index:1; zetten.

Position relative staat altijd boven position absolute. Heb je 2 position relative moet z-index gewoon werken.

Origineel gepost door René Vennik

Position relative staat altijd boven position absolute. Heb je 2 position relative moet z-index gewoon werken.

Wanneer beide divs relative zijn komen ze niet over elkaar heen
te hangen ...

Ik hoef maar één relatieve div te hebben (#roze). Ik kan deze niet absolute maken aangezien de lengte van de inhoud boven de div #roze varieert. Echter, als ik deze (om te testen), absolute maak, dan gaat #roze wel over #footer heen. Maar als ik dan naar een andere (langere) pagina ga, staat die div weer helemaal fout.

Je kunt de hoogte van je absoluut gepositioneerde div wel flexibel maken.

min-height: 100px;
height: auto !important;
height: 100px;

groeit het mee