[ Forrige | Indhold | Næste]

Lektion 15: Lag på lag med z-index (Layers)

CSS arbejder tre dimensioner - højde, bredde og dybde. De to første har vi kigget på i de tidligere lektioner. I denne lektion gennemgås hvordan man kan lade forskellige elementer blive til layers (lag) - det vil kort sagt sige rækkefølgen hvormed elementerne skal overlappe hinanden.

Til dette formål kan man tildele hvert element et nummer (z-index). Systemet er så at et element med et højere nummer overlapper elementer med et lavere nummer.

Lad os sige at vi spiller poker - og har fået en fornuftig royal flush. Vores hånd kan således præsenteres på denne måde, hvor hvert kort har fået et z-index:

I dette tilfælde følger numrene direkte efter hinanden (1-5), men det samme resultat kan opnås med 5 andre tal - det vigtige er rækkefølgen (størrelsesordenen).

Koden for eksemplet med kortene kunne f.eks. se sådan her ud:

#ruder_10 {
	position: absolute;
	left: 100px;
	bottom: 100px;
	z-index: 1;
}
#ruder_knaegt {
	position: absolute;
	left: 115px;
	bottom: 115px;
	z-index: 2;
}
#ruder_dame {
	position: absolute;
	left: 130px;
	bottom: 130px;
	z-index: 3;
}
#ruder_konge {
	position: absolute;
	left: 145px;
	bottom: 145px;
	z-index: 4;
}
#ruder_es {
	position: absolute;
	left: 160px;
	bottom: 160px;
	z-index: 5;
}

 Vis som eksempel

Systemet er relativt enkelt - men mulighederne er mange. Du kan placere billeder på tekst, eller tekst over tekst - eller noget helt tredie.

Browser-kompatibelitet

Layers med CSS understøttes af de fleste browsere. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

Layers kan benyttes til mange ting - prøv f.eks. at benyt z-index til at skabe effekter på f.eks. overskrifter, istedet for at lave disse som grafik. Dels er det hurtigere at loade tekst, dels giver tekst bedre placeringer hos søgemaskinerne.

[ Forrige | Indhold | Næste]