CSS’te Position ve z-index Kullanımı

CSS’te konumlandırma (position) özelliği, HTML öğelerinin sayfadaki yerleşimini belirlemek için kullanılır. Ancak, bu özellik yeni başlayanlar için biraz kafa karıştırıcı olabilir. Çünkü static, relative, absolute, fixed ve sticky gibi farklı değerler alabilir ve her biri farklı davranışlar sergiler. Ayrıca, öğelerin üst üste binme sırasını belirleyen z-index özelliği de konumlandırmada önemli bir rol oynar.

Bu yazıda, position ve z-index özelliklerini tüm yönleriyle ele alacak ve örneklerle açıklayacağız. Böylece sayfa tasarımlarınızda öğeleri nasıl daha kontrollü bir şekilde konumlandırabileceğinizi öğrenmiş olacaksınız.

CSS'te position özelliğinin farklı değerleri olan static, relative, absolute, fixed ve sticky konumlandırmalarının görsel temsili.

1. Static (Varsayılan Konumlandırma)

Static, CSS’te varsayılan konumlandırma türüdür. Eğer bir öğeye position özelliği atamazsanız, otomatik olarak static kabul edilir.

• Static öğeler, normal akışa bağlıdır.
• Top, right, bottom, left gibi özellikler static öğelerde işe yaramaz.

Örneğin, üç farklı kutumuz olduğunu düşünelim ve bunlara position: static; verelim:

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: static;
}

Bu durumda, kutular normal belge akışında sıralanır ve herhangi bir özel konumlandırma olmaz.

2. Relative (Göreceli Konumlandırma)

Relative, öğeyi normal akışta bırakır ancak top, right, bottom, left gibi özelliklerle bulunduğu konuma göre hareket ettirilebilir.

• Öğe, normalde olduğu konumu korur, ancak belirlenen miktarda kaydırılabilir.
• Diğer öğeler, bu öğenin eski konumuna göre hizalanır.

Örnek olarak bir kutuyu normal yerinden 50 piksel aşağı ve 30 piksel sağa kaydıralım:

.box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    position: relative;
    top: 50px;
    left: 30px;
}

Bu durumda kutu normalde olması gereken yerden kaydırılır, ancak diğer öğeler onun eski konumunu referans almaya devam eder.

3. Absolute (Mutlak Konumlandırma)

Absolute, bir öğeyi belge akışından tamamen çıkarır ve belirli bir üst öğeye göre konumlandırır.

• Öğe, normal akıştan çıkarıldığı için diğer öğeler onun varlığını bilmez.
• Eğer bir üst öğesi yoksa, body etiketi baz alınarak konumlandırılır.

Örneğin, aşağıdaki gibi bir kutumuz olduğunu düşünelim:

.container {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: lightgray;
}

.box {
    width: 100px;
    height: 100px;
    background-color: steelblue;
    position: absolute;
    top: 20px;
    left: 20px;
}

Burada .box öğesi, .container öğesi relative olarak ayarlandığı için ona göre konumlanır. Eğer .container öğesine position: relative; verilmeseydi, .box doğrudan sayfanın sol üst köşesine göre konumlanacaktı.

4. Fixed (Sabit Konumlandırma)

Fixed, öğeyi sayfanın belirli bir yerine sabitler ve sayfa kaydırıldığında bile konumunu korur.

• Öğe, normal akıştan çıkar ve sayfanın sabit bir noktasında kalır.
• Genellikle sabit navigasyon menüleri için kullanılır.

Örneğin, ekranın sol üst köşesinde sabit bir kutu oluşturmak için:

.fixed-box {
    width: 120px;
    height: 50px;
    background-color: darkred;
    position: fixed;
    top: 0;
    left: 0;
}

Bu durumda .fixed-box, sayfa aşağı veya yukarı kaydırılsa bile her zaman sol üst köşede kalır.

5. Sticky (Yapışkan Konumlandırma)

Sticky, hem relative hem de fixed konumlandırmanın birleşimidir.

• Öğe, belirli bir noktaya kadar normal akışta kalır, ancak o noktaya geldiğinde sabitlenir.
• Genellikle sayfayı kaydırırken belirli başlıkların üstte sabitlenmesini sağlamak için kullanılır.

Örneğin, aşağıdaki gibi bir başlık oluşturabiliriz:

.header {
    width: 100%;
    background-color: navy;
    color: white;
    padding: 10px;
    position: sticky;
    top: 0;
}

Bu durumda .header, sayfanın en üstüne geldiğinde sabitlenir ve kaydırıldığında kullanıcıya görünmeye devam eder.

6. z-index (Öğeleri Katmanlama)

CSS’te z-index, öğelerin üst üste binme sırasını belirlemek için kullanılır.

• Sadece position değerleri relative, absolute, fixed veya sticky olan öğelere uygulanabilir.
• Daha yüksek z-index değeri, öğenin diğerlerinin üzerinde görünmesini sağlar.

Örneğin, iki kutunun üst üste gelmesini sağlayalım:

.box1 {
    width: 150px;
    height: 150px;
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
}

.box2 {
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 2;
}

Bu kodda .box2, .box1'den daha yüksek bir z-index değerine sahip olduğu için kırmızı kutu mavi kutunun üstünde görünecektir.

CSS'te z-index özelliğinin nasıl çalıştığını gösteren görsel. Daha yüksek z-index değeri olan öğeler, diğer öğelerin üzerinde görüntülenir.

Özet ve Karşılaştırma

Bu bilgilerle sayfa düzenlerini daha iyi kontrol edebilir ve öğeleri istediğiniz gibi yerleştirebilirsiniz.