CSS Pozisyon Özellikleri (Positioning)

CSS pozisyonlama, web tasarımında öğelerin sayfa üzerinde konumlarını kontrol etmek için kullanılan önemli bir tekniktir. CSS position özelliği, öğelerin sayfa içindeki yerini belirlemek için kullanılır. Pozisyonlama sayesinde öğelerin nasıl hareket edeceği, ne şekilde yerleşeceği ve hangi öğelerin diğer öğelere göre konumlanacağı belirlenebilir. CSS’de pozisyonlama, genellikle static, relative, absolute, fixed ve sticky değerleriyle yapılır.

1. static Pozisyon

Varsayılan pozisyonlama türüdür ve tüm öğeler otomatik olarak static pozisyonda yerleşir. Bu pozisyon türünde öğe, sayfadaki akışa göre yerleştirilir. top, right, bottom, left gibi özellikler bu pozisyonda çalışmaz.

Örnek:

div {
  position: static;
}

Bu örnekte, div öğesi sayfa akışına göre yerleştirilir ve herhangi bir konum değişikliği yapılmaz.

Açıklama:
static pozisyonlama, öğeyi varsayılan (normal akış) pozisyonunda tutar. top, right, bottom, left özellikleri kullanılmaz.

2. relative Pozisyon

relative pozisyonlama, öğeyi normal yerinden kaydırmak için kullanılır. Bu, öğenin orijinal konumuna göre yer değiştirmesine olanak tanır ancak diğer öğelere etkisi yoktur; yani öğe hala kendi orijinal yerinde kalır, ancak sayfadaki konumu kaydırılır.

Özellikler:

• top: Öğeyi yukarı doğru kaydırır.
• right: Öğeyi sağa kaydırır.
• bottom: Öğeyi aşağıya kaydırır.
• left: Öğeyi sola kaydırır.

Örnek:

div {
  position: relative;
  top: 20px;
  left: 30px;
}

Bu örnekte, div öğesi, normal yerinden 20px aşağıya ve 30px sağa kaydırılır.

Açıklama:
relative pozisyon, öğenin konumunu değiştirdiğinde sayfa akışını bozmaz, diğer öğeler bu öğenin yeni konumunu göz önünde bulundurmaz.

3. absolute Pozisyon

absolute pozisyonlama, öğeyi, en yakın position: relative, absolute, veya fixed konumlu ebeveyn öğesine göre konumlandırır. Eğer böyle bir ebeveyn yoksa, öğe sayfanın sol üst köşesine yerleştirilir.

Özellikler:

• top, right, bottom, left: Öğeyi ebeveyn öğesine göre kaydırır.
• Öğenin bulunduğu yer, sayfanın kaydırılabilir kısmı değil, konumlandırılan ebeveyn öğesi olarak kabul edilir.

Örnek:

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

Bu örnekte, .box öğesi, .container öğesinin sol üst köşesinden 50px aşağıda ve 100px sağda yer alacaktır.

Açıklama:
absolute pozisyonlama, öğeyi tam olarak belirlediğiniz koordinatlarda yerleştirir ve diğer öğelerle konumlanması üzerinde etki yapmaz.

4. fixed Pozisyon

fixed pozisyonlama, öğeyi sayfanın görünür alanına göre sabitler. Sayfa kaydırıldığında, öğe kaymaz ve ekranın sabit bir noktasında kalır.

Özellikler:

• top, right, bottom, left: Öğeyi sayfanın sabit bir konumuna yerleştirir.
• Sayfa kaydırılsa bile, öğe her zaman sabit kalır.

Örnek:

div {
  position: fixed;
  top: 0;
  left: 0;
}

Bu örnekte, div öğesi sayfanın sol üst köşesine sabitlenir ve sayfa kaydırıldığında bile yerinden oynamaz.

Açıklama:
fixed pozisyonlama, öğeyi ekranın sabit bir noktasına yerleştirir. Bu özellik genellikle sabit başlıklar veya sabit menüler için kullanılır.

5. sticky Pozisyon

sticky pozisyonlama, öğenin kaydırma sırasında, belirli bir noktaya kadar sayfa kaydığında “yapışmasını” sağlar. Örneğin, bir öğe sayfa kaydırıldıkça yukarıya yapışabilir ve sayfa kaydırıldığında ekranda sabit kalabilir.

Özellikler:

• top, right, bottom, left: Öğeyi, kaydırılmaya başladığında yapışacağı noktayı belirler.
• position: sticky sayfa kaydırıldıkça öğeyi yapıştırır.

Örnek:

header {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
}

Bu örnekte, header öğesi, sayfa kaydırıldığında üstte sabit kalacaktır.

Açıklama:
sticky pozisyonlama, öğeyi belirli bir kaydırma noktasına kadar normal akışta bırakır, sonra o noktada sabitler.

6. z-index ile Katmanlama (Layering)

Pozisyonlama ile birlikte z-index kullanılarak öğelerin katmanları ayarlanabilir. z-index, öğelerin birbirinin üstünde mi yoksa altında mı görünmesini istediğimizi belirler. Yüksek z-index değeri olan öğe, düşük değeri olan öğenin üstünde yer alır.

Örnek:

div.one {
  position: absolute;
  z-index: 10;
}

div.two {
  position: absolute;
  z-index: 5;
}

Bu örnekte, .one öğesi .two öğesinin üstünde görüntülenir çünkü z-index değeri daha yüksektir.