Index  HTML  CSS  ASP  PHP  VBScript
 Javascript  SQL  Links  Contact  Gastboek  

  CSS
  Groeperen
  Pseudo-Class
  Font
  Tekst
  Background
  Button
  Formulier
  Cursor
  Positie
  Z-index
  Visibility

Z-index

In dit geval willen we de volgorde van de lagen gaan aanpassen.

Voorbeeld:

<style type="text/css">
.lay1 {
width: 100px;
height: 100px;
background-color: #0080ff;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
.lay2 {
width: 150px;
height: 150px;
background-color: silver;
position: absolute;
top: 25px;
left: 25px;
z-index: 1;
}
</style>

<body>
<div class="lay1">Laag 1</div>
<div class="lay2">Laag 2</div>
</body>

Klik hier... Voorbeeld

Als je het voorbeeld hebt gezien, merk je dat de lagen nu omgedraaid zijn. De blauwe laag bovenop en de zilveren laag onderop. Dit kun je bepalen door het property z-index te gebruiken. Zo bepaal je de volgorde van de lagen.