Positionering i den tredje dimension: z-index
Siden er opdateret 23.1.2008
Du kan placere elementer på din hjemmeside med en nøjagtighed på 1 pixel i højden og bredden, når du anvender absolut positionering.
Men du kan også styre elementers placering i en tredje dimension: lag - eller afstand fra baggrunden, om du vil.
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 byttet om på placering 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.
