Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS z-index

Ga je verder met CSS en JQuery, dan wil je de volgorde van het laten zien van elementen op je site, kunnen bepalen. Met de CSS z-index eigenschap kun je zelf bepalen wat je boven en onder wilt laten zien.

CSS 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>

Als je het voorbeeld hebt uitgewerkt, 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.

Let op, de z-index werkt alleen op elementen waarin je de position eigenschap hebt ingesteld.