z-index

Siden er opdateret 29. 12. 2011

Med egenskaben z-index kan du definere den lag-rækkefølge overlappende absolute positionerede elementer skal vises i, uafhængig af den rækkefølge, elementerne er indskrevet i sidens kildekode.

Det er på siden om absolute position vist, at du kan placere elementer på din hjemmeside med en nøjagtighed på 1 pixel i højden og bredden.

Men du kan også styre elementers placering i en tredje dimension: lag - eller afstand fra baggrunden, om du vil.

blå cirkel
grøn cirkel
gul cirkel
rød cirkel

Hvis du kigger på de fire cirkler her til venstre, så kunne illustrationen laves med et stort billede, hvor cirklerne overlapper hinanden. Men her er det lavet med fire små billeder, der ved hjælp af z-index er sat til at overlappe hinanden i den ønskede rækkefølge.

Uden z-index ville den blå cirkel ligge nederst, overlappet af den grønne og den gule og med den røde øverst - for det er den rækkefølge, hvormed de er indskrevet på siden. Med position:absolute har jeg defineret placeringen og med z-index har jeg ændret lagfølgen

Lad mig blot runde af med at vise, hvorledes det gøres:

#cirk1 {position:absolute; top:5px; left:5px; z-index:1;}
#cirk2 {position:absolute; top:30px; left:30px; z-index:2;}
#cirk3 {position:absolute; top:55px; left:55px; z-index:3;}
#cirk4 {position:absolute; top:80px; left:80px; z-index:4;}

Herover ser du css-koden til de to første cirkler. Læg mærke til deres forskellige z-index. Det er sådan, at man kan indexere z med heltal, hvor 0 er default fast 'på papiret' og så lægges lagene fra 1 til ? ovenpå hinanden.

Herunder viser jeg så koden til indsættelse af de fire billeder på siden - i den rækkefølge, jeg har skrevet det i kildekoden:

<div id="cirk4"><img src="blaacirk. .... alt=""></div>
<div id="cirk3"><img src="groncirk. .... alt=""></div>
<div id="cirk2"><img src="gulcirk. .... alt=""></div>
<div id="cirk1"><img src="rodcirk. .... alt=""></div>

Lige en slutbemærkning: Du kan kun bruge z-index på elementer, der er indsat med absolut positionering.

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - z-index
sidens top
Brugere lige nu: 1
Home Mail