Z-Index Temelleri

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 59 / 76.

CSS'de, z-index özelliği konumlandırılmış öğelerin (static dışında bir konuma sahip öğeler) yığın sırasını kontrol eder. Öğeler üst üste bindiğinde, z-index hangi öğenin üstte, hangisinin arkada görüneceğini belirler. Daha yüksek bir z-index değerine sahip öğeler, daha düşük değerli öğelerin önünde istiflenir.

İşte z-index özelliğini kullanmak için temel sözdizimi:

selector {
    position: relative; /* veya absolute, fixed veya sticky */
    z-index: value;
}

position: relative; (veya absolute, fixed, veya sticky): z-index'in etkili olması için öğenin konumlandırılmış olması gerekir.

value: Yığınlama sırasını temsil eden tam sayı bir değer. Daha yüksek değerlere sahip öğeler, daha düşük değerlere sahip öğelerin önünde yığınlanır. Değer pozitif, negatif veya sıfır olabilir.

Örneğin:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Bu örnekte, hem .box1 hem de .box2 mutlak olarak konumlandırılmıştır. .box1 daha yüksek bir z-index değerine sahip olduğu için, üst üste bindiklerinde .box2 öğesinin önünde yığınlanacaktır.

Görev

Kolay

Size box1, box2 ve box3 sınıflarına sahip, üst üste binen üç bölüme (<div>) sahip bir HTML belgesi verilmiştir. Göreviniz, bu öğelerin yığın sırasını kontrol etmek için z-index özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

box1 sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. position özelliğini absolute, top değerini 0, left değerini 0 ve z-index değerini 3 olarak ayarlayın.
box2 sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. position özelliğini absolute, top değerini 20px, left değerini 20px ve z-index değerini 2 olarak ayarlayın.
box3 sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. position özelliğini absolute, top değerini 40px, left değerini 40px ve z-index değerini 1 olarak ayarlayın.

z-index değerlerinin kutuların yığın sırasını nasıl etkilediğini, box1 en üstte ve box3 en altta olacak şekilde gözlemleyin.

Kopya kağıdı

z-index özelliği, konumlandırılmış öğelerin yığın sırasını kontrol eder. Daha yüksek z-index değerlerine sahip öğeler, daha düşük değerlere sahip öğelerin önünde görünür.

Temel sözdizimi:

selector {
    position: relative; /* veya absolute, fixed veya sticky */
    z-index: value;
}

Gereksinimler:

Öğenin static dışında bir konuma (position) sahip olması gerekir
Değer pozitif, negatif veya sıfır olabilir
Daha yüksek değerler, daha düşük değerlerin önünde istiflenir

Örnek:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Kendin dene

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>