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
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
