Hva er z-index og hva bruker jeg det til?
Kommandoen z-index lar deg legge elementer oppå hverandre, slik at du for eksempel kan legge to bokser oppå hverandre i den rekkefølgen du selv velger.

Så når kan det være nyttig, spør du? Jo, når du lager en delvis gjennomsiktig boks, som jeg har fortalt om under temaet Gjennomsiktig boks, blir også teksten delvis gjennomsiktig.

Det finnes flere måter å fikse det problemet på. En av dem er å bruke delvis gjennomsiktig png-fil, men da må du legge inn ekstra kode slik at det fungerer i eldre Internet Explorer nettelesere. Bruker du z-index og to bokser får du en løsning som fungerer i både Internet Explorer, Mozilla og Opera.

Det du gjør er å lage to nøyaktig like store bokser, en delvis gjennomsiktig boks og en "vanlig" boks uten bakgrunn til å skrive teksten i, og legger den med teksten i oppå den gjennomsiktige. Det vil da se ut som du har en boks med delvis gjennomsiktig bakgrunn, med tekst som ikke er gjennomsiktig.

/* Koden for den bakerste boksen */
#boks1 { /* Den boksen som ligger bakerst */
background-color:#3a434a; /* Bakgrunnsfargen som skal være delvis gjennomsiktig */
width:150px; /* Begge boksene må ha nøyaktig samme bredde */
height:175px; /* og samme høyde */

/* Gjennomsiktigheten */
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;

z-index:0; /* z-index:0 plasserer boksen bakerst */
}

/* Koden for den fremste boksen (den du skriver teksten i) */
#boks1 { /* Den boksen som ligger bakerst */
width:150px; /* Begge boksene må ha nøyaktig samme bredde */
height:175px; /* og samme høyde */

z-index:1; /* z-index:1 plasserer boksen oppå den første boksen */
}

OBS! Denne koden validerer ikke.