CSS POSITION

Nesneleri kimi zaman verdiğimiz koordinatlara yerleştirmek isteriz.Bu konumlandırma işlemini CSS, üç şekilde ele alır.Göreceli,mutlak ve sabit konumlandırma.

GÖRECELİ KONUMLANDIRMA(POSITION:RELATIVE)

Referans alınan bir nokta vardır. Bu nokta position:relative özelliğinin verildiği nesneye aittir.Aşağıdaki örnekte bu Kutu 2’dir. top, left, right, bottom değerlerine göre göreceli olarak nesnemiz konumlanacaktır.

Göreceli konumlandırma kullanılarak yeri belirlenen bir nesnenin başlangıçtaki konumundaki boşluğu ve diğer nesnelerle arasındaki mesafeyi koruyacaktır.

MUTLAK KONUMLANDIRMA(POSITION:ABSOLUTE)

Göreceli konumlandırmada istenilen yere nesne yerleştirilse bile başlangıçtaki yerine göre dizilim devam ediyor.Mutlak konumlandırmada yeri değiştirilen nesne dizilim sırasında yokmuş gibi farzedilir. Bu arada bahsi geçen nesne istenilen kordinata yerleştirilir.Referans olarak ise eğer bir üst nesnenin içindeyse o nesnenin bulunduğu yere göre referans alınır.Eğer herhangi bir üst nesne yoksa web sayfasının sol üst köşeşi(0,0) referans alınır.Ayrıca referans noktası ekran çözünürlüğüne göre de değişecektir.

Burada nesnelerin üst üste binmesi olayı söz konusu olur.Bunu ise z-index özelliği ile halledebiliriz. z-index değeri büyük olan en üstte  küçük olan altta olacaktır. z-index sadece göreceli, mutlak ve sabit konumlandırma işlemine tabi tutulmuş nesnelerde çalışır.

SABİT KONUMLANDIRMA(POSITION:FIXED)

Bir nevi mutlak konumlandırmadır.Belirtilen nesne sayfada askıda kalır.Kaydırma çubuğunu hareket ettirseniz dahi bulunduğu noktada sabit olarak kalır.Web dünyasında genellikle reklam banerlarında çok kullanılır.Ne kadar kaçmaya çalışsanız da hep üstte kalır.