CSS Position: Konumlandırma Özellikleri ve Kullanımı

CSS position özelliği, HTML elemanlarının sayfa içindeki konumunu ayarlamak için kullanılır. position ile bir öğeyi sayfa üzerinde sabit bir konuma yerleştirebilir, diğer elemanlara göre konumlandırabilir ya da serbestçe hareket ettirebilirsiniz. Bu içerikte, CSS position özelliklerini, nasıl kullanıldıklarını ve her birinin farklı senaryolardaki işlevlerini inceleyeceğiz.

1. CSS Position Değerleri Nelerdir?

CSS position özelliğinde kullanılabilen başlıca değerler şunlardır:

• static: Varsayılan konumlandırma türüdür. Öğeler sıralı şekilde yerleşir.
• relative: Öğeyi kendisine göre konumlandırır. Belirtilen uzaklıklara göre hareket eder.
• absolute: Öğeyi sayfada mutlak bir konuma yerleştirir ve diğer öğelere göre değil, en yakın relative veya absolute üst öğesine göre konumlanır.
• fixed: Öğeyi sayfada sabitler ve kullanıcı sayfayı kaydırsa bile yerini korur.
• sticky: Öğeyi, kaydırma hareketine bağlı olarak sabit ve dinamik bir pozisyonda tutar.

2. position: static;

static, varsayılan konumlandırma türüdür. Bu değeri verdiğinizde eleman normal akışa göre yerleşir. top, right, bottom, left özellikleri static için kullanılamaz.

Örnek Kod:

<div class="static-box">Statik Eleman</div>

CSS Kodları:

.static-box {
    position: static;
    background-color: lightgray;
}

3. position: relative;

relative konumu, öğeyi normal akışa göre yerleştirir ve ardından top, right, bottom, left değerlerine göre kendi başlangıç konumundan hareket ettirir.

Örnek Kod:

<div class="relative-box">Relative Eleman</div>

CSS Kodları:

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
    background-color: lightblue;
}

Bu örnekte, eleman orijinal pozisyonundan 10 piksel aşağı ve 20 piksel sağa kayacaktır.

4. position: absolute;

absolute, öğeyi sayfa içinde mutlak bir konuma yerleştirir. Öğenin konumu, en yakın relative, absolute veya fixed üst öğesine göre belirlenir.

Örnek Kod:

<div class="absolute-container">
    <div class="absolute-box">Absolute Eleman</div>
</div>

CSS Kodları:

.absolute-container {
    position: relative;
    height: 200px;
    background-color: lightgray;
}
.absolute-box {
    position: absolute;
    top: 30px;
    right: 10px;
    background-color: lightcoral;
}

Bu örnekte, .absolute-box öğesi .absolute-container içine göre konumlandırılmıştır.

5. position: fixed;

fixed, öğeyi pencere içinde sabit bir konuma yerleştirir ve kullanıcı sayfayı kaydırsa bile eleman aynı pozisyonda kalır. Sabit başlıklar veya sabit kenar çubukları oluşturmak için kullanılır.

Örnek Kod:

<div class="fixed-box">Fixed Eleman</div>

CSS Kodları:

.fixed-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: lightgreen;
}

6. position: sticky;

sticky, öğeyi belirli bir noktaya kadar sabit tutar. Kullanıcı kaydırma yaptığında eleman o konuma sabitlenir, ardından içerik akışıyla birlikte hareket eder. sticky öğelerin, top, right, bottom, left değerlerinden biriyle birlikte kullanılması gerekir.

Örnek Kod:

<div class="sticky-container">
    <div class="sticky-box">Sticky Eleman</div>
</div>

CSS Kodları:

.sticky-container {
    height: 500px;
    background-color: lightgray;
}
.sticky-box {
    position: sticky;
    top: 0;
    background-color: lightyellow;
}