login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > CSS


Gegevens:
Geschreven door:
SmokaLot
Moeilijkheidsgraad:
Normaal
Hits:
87334
Punten:
Aantal punten:
 (2.54)
Aantal stemmen:
13
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (4)
 



Tutorial:

Z-index


1. z-index

Dit stijl element bepaalt de stapelhoogte. In andere woorden, het bepaalt welke layer voorrang krijgt over de andere.

Veronderstel dat we layers hebben die elkaar overlappen:

<head>
<style type="text/css">
#hoofdblok

{ position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#geleblok

{ position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 }

#groeneblok

{ position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 }
</style>
</head>

<body>
<div id="hoofdblok">
Dit is de hoofdblok
<div id="geleblok">
Dit is de gele blok
</div>
<div id="groeneblok">
Dit is de groene blok
</div>
</div>
</body>

In je browser zie je:
Dit is de hoofdblok
Dit is de gele blok
Dit is de groene blok



Zoals je ziet overlapt de groene layer de gele layer. Als we nu willen dat de gele layer de groene layer overlapt dan kunnen we het z-index: stijl element gebruiken.

<head>
<style type="text/css">
#hoofdblok

{ position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#geleblok

{ position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000; z-index:2 }
#groeneblok

{ position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000; z-index:1 }
</style>
</head>

<body>
<div id="hoofdblok">
Dit is de hoofdblok
<div id="geleblok">
Dit is de gele blok
</div>
<div id="groeneblok">
Dit is de groene blok
</div>
</div>
</body>

Resultaat:
Dit is de hoofdblok
Dit is de gele blok
Dit is de groene blok



« Vorige tutorial : Selectors Volgende tutorial : Positioning layers »

© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.016s