CSS3 - Slojevi (Layers)


Slaganje elemenata u slojeve pomoću svojstva z-index

Obično se HTML stranice smatraju dvodimenzionalnim, jer su tekst, slike i drugi elementi poredani na stranici bez preklapanja. Međutim, pored vodoravnog i horizontalnog položaja, okviri se mogu slagati i po z-osi (eng. z-axis), tj. jedan na drugi pomoću CSS svojstva z-index. Ovo svojstvo specifikuje nivo okvira čija je vrijednost položaja absolute, fixed, ili relative. Položaj z-ose (eng. z-axis) svakog sloja izražava se kao cijeli broj koji predstavlja redosljed slaganja za prikazivanje. Element sa većim z-indexs-om preklapa se sa elementom nižeg. Svojstvo z-index može vam pomoći u stvaranju složenijih izgleda web stranica. Pogledajmo primjer koji pokazuje kako stvoriti slojeve u CSS-u.

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Layers efekta</title>
<style>
    .container{
        position: relative;
    }
    .box{
        width: 150px;
        height: 150px;
        opacity: 0.9;
        position: absolute;
    }
    .red{
        background: #ff0000;
        z-index: 1;
    }
    .green{
        top: 30px;
        left: 30px;
        background: #00ff00;
        z-index: 2;
    }
    .blue{
        top: 60px;
        left: 60px;
        background: #0000ff;
        z-index: 3;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box red"></div>
        <div class="box green"></div>
        <div class="box blue"></div>
    </div>
</body>
</html>