Merhaba,

CSS position özelliği çok yönlü ve güçlüdür. Bir öğenin konumunu ayarlamaya veya değiştirmeye izin verir. 4 olası değeri vardır:

static (varsayılan), relative, absolute ve fixed

Bunları tek tek inceleyelim;

static

Bu position değeri varsayılan değerdir. Bir önceki yazıda belirttiğimiz doğal akışa göre davranır. left, right, top, bottom gibi pozisyon özelliklerinden etkilenmez.

relative

Bu position değeri, uygulandığı öğeye mevcut konumuna göre hareket imkanı sağlar. Bir örnekle anlamaya çalışalım:

<p>Yurtta sulh, cihanda sulh.</p>
<p> Hayatı ve özgürlüğü için ölümü göze alan bir millet asla yenilmez.</p>
<p> Egemenlik verilmez, alınır.</p>

Bu 3 paragrafımıza bir de çerçeve ekleyelim.

p{ border: 1px solid blue;}

Görünümü:

Şimdi 2. paragrafımıza relative özellik kazandıralım.

HTML:

<p>Yurtta sulh, cihanda sulh.</p>
<p class="ikinci">Hayatı ve özgürlüğü için ölümü göze alan bir millet asla yenilmez.</p>
<p>Egemenlik verilmez, alınır.</p>

CSS:

.ikinci{ position: relative; border-color: red; left: 20px; top: 10px;}

Sonuç:

Kırmızı çerçeveli paragraf, olması gereken doğal konumuna göre soldan 20 piksel ve üstten 10 piksel konum değiştirdi. Ve mavi paragraflarımızın konumunda bir değişiklik olmadı. Relative pozisyon değerimizi kullanarak kırmızı çerçeveli paragrafımız sayfa düzenini bozmadan, diğer sayfa öğelerini etkilemeden serbestçe hareket edebildi.  

absolute

Bu position değeri kullanıldığında öğe, alt öğesi olduğu (child-element) ana öğeye (parent-element) göre konum alır. Basit bir şekilde örnekleyelim:

HTML:

<section>
  Ben relative pozisyonda bir öğenin içerisindeyim.
  <p>
    Ben absolute pozisyonda bir öğenin içerisindeyim.
  </p>
</section>

CSS:

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative;
}

p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

Görünümü:

Sarı bölümün yüksekliği 200 pikseldir ve konumu relative olarak ayarlanmıştır, bu da onu tüm alt öğeleri için bir referans noktasına dönüştürür.

Yeşil arkaplanlı öğenin konumu absolute olarak ayarlandığından dolayı, sarı bölüme göre serbestçe hareket edebilir. Hem alt hem de sol değerleri tanımlandığı için, sol alt köşesine göre konum alacaktır.

fixed

Bu pozisyon değeri absolute pozisyon değeri ile aynı mantıkta çalışır. Tek farkı, konumunu içerisinde bulunduğu ana öğeden değil, görüntülenen ekrana göre alır. Bu da ekranda belirli bir noktada sabit kalmasını, sayfa scroll edilse dahi bu öğenin konumunda bir değişiklik olmamasını sağlar.