Z-index

Info 
Door: Zorzie Moeilijkheidsgraad: 2/3
Views:21.094Reacties: 4(Bekijken)
  Log in om zelf te reageren
 Waardering:10/10 (3 stemmen)



Nee, z-index is geen index op de beurs of een maatstaf waaraan je je moet houden. Het is een handige functie in CSS. Welke functie? Wel, ik leg het even kort uit. Je werkt met divs en positioneert ze. Nu komen er 2 divs over elkaar (wat de bedoeling is). Hoe weet de code nu welke layer er vanboven moet liggen en welke vanonder? Daar hebben we de z-index voor.

Algemeen
De z-index wordt aangegeven door het atribuut 'z-index' en kan alle getallen bevatten. De standaard z-index is 0. dat betekent dat alles wat niet geindexeerd wordt, dat dat 'z-index : 0 ;' heeft. Des te groter de z-index (1, 2, 3 ...) des te hoger het object komt te liggen. Een voorbeeld :

#Code
1
2
3
4
5
6
7
8
9
10
11
12
.layer1 {
position : absolute ;
left : 50px ;
top: 20px ;
z-index : 1 ;
}
.layer2 {
position : absolute ;
left : 50px ;
top: 20px ;
z-index : 2 ;
}

Dit wil zeggen dat layer1 (of een afbeelding) onder layer2 zal liggen.

Dat wil niet zeggen dat je niet lager dan 0 kan. Je mag zelfs negatieve getallen gebruiken. Een klein voorbeeld.
#Code
1
2
3
4
5
6
.layer {
position : absolute ;
left : 30px ;
top: 10px ;
z-index : -1 ;
}

De layer komt nu onder alle andere layers die geen of een hogere z-index hebben. Ook komt het achter een tekst te staan. Je kan dus met z-index ook een achtergrond afbeelding laten weergeven.

Zo, dat was alles wat ik te zeggen heb over de z-index.
Ik hoop dat jullie wat bijgeleerd hebben.

MVG
Zorzie

4 reacties
Redzero90 Geplaatst op 28-03-2007 om 15:03
 

Regular
Als ik dat absolute postioneren weghaal dan is ie ineens niet meer de achterste layer
hoe zet ik em zonder dat in het midden
omarjuul Geplaatst op 15-01-2007 om 16:25
 

Regular
Handig en bondig uitgelegd.
Onbekend lid Geplaatst op 20-07-2004 om 17:29
 

Spammer
dus je kan een soort tabbladen maken ofzoiets
aRAchNiON Geplaatst op 29-06-2004 om 09:31
Avatar van aRAchNiON

Moderator
Even een kleine opmerking: Z-index wordt NIET ondersteund door Netscape.

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder