CSS Konumlandırma (Position) Özellikleri Nelerdir? Nasıl Kullanılır?

Tüm Html elementlere uygulaya bileceğiniz CSS 2.0 ile gelen  bu özellik sayesinde istediğiniz objenin konumlandırma özelliklerini değiştire bilirsiniz. İster block bir element olan div,form,p ve h1 vb isterseniz de inline element olan a,img,span vb objelere konumlandırma özelliklerini uygulaya bilirsiniz. Konumlandırma (position) yapısının aldığı değerlere bakacak olursak bunlar “static“,”relative“,”absolute”  ve “fixed” olarak tanımlayabiliriz. Div (kutu) modelleme yapsını ele alarak position kullanım yapısını örneklerle inceleyelim.

Tarayıcı Uyumluluğu

 

 

Static Kullanım (position:static)

Varsayılan olarak gelen bu özellik herhangi bir objeye tanımlama yapmasanızda otomatik olarak atanan değerdir. Kısaca tüm elementler başlangıçta statiktir diyebiliriz.

Not: Statik olan elementlere top,left,bottom ve right gibi değerler kullanılamaz. Bu değerler yerine margin-top,margin-bottom,margin-left ve margin-right yapılarını kullana bilirsiniz.

 

See the Pen domGLv by MinimalCoding (@MinimalCoding) on CodePen.

 

 

Relative Kullanım (position:relative)

Göreceli konumlandırma olarak bilinen bu yapı kendinden önce gelen yapıyı tanıyarak konumlandırma işlemini ona göre yapacaktır.Aslında relative yapıda statik yapı gibi davranmaktadır, aralarında ki küçük fark top,right,bottom,left gibi değerlerin atana biliyor olmasıdır.

Not: Top,left,bottom,right yapıları piksel (px) yada yüzde (%) cinsinden değer alabilir. 

 

See the Pen BNrjeP by MinimalCoding (@MinimalCoding) on CodePen.

 

 

Absolute Kullanım (position:absolute)

Bu kullanım şekli kapsayıcısını baz alarak kendini ona göre konumlandırma işlemi gerçekleştirecektir. Aynı kapsayıcı içinde bulunan elementleri yok sayarak konumlandırma işlemini ona göre yapacaktır, yani akışı bozacaktır. aşağıdaki uygulama ile  bu yapıyı daha net algılayalım.

Not: Konumlandırma işlemleri, yapıların sol üst köşesini merkez alarak yapmaktadır. 

 

See the Pen MwVygg by MinimalCoding (@MinimalCoding) on CodePen.

 

 

Fixed Kullanım (position:fixed)

Adından da anlaşılacağı gibi sabit kullanım yöntemi web sayfalarında sabit kalmasını istediğimiz alanlar için kullana biliriz.Kalıtsal özellik olarak absolute kullanımını kendine örnek alır yani kapsıyıcısı neyse ona göre haraket edecektir. Aşağıdaki örnek içinde scroll yapısını aşağı yukarı haraket ettirdikçe çalışma mantığı daha kolay anlaşılacaktır.

 

See the Pen vORGYW by MinimalCoding (@MinimalCoding) on CodePen.

 

Z-index

Konumlandırma işlemi yaparken sıklıkla kullanacak olduğumuz diğer bir değer Z-index’tir. Örneğin birden fazla positon:absolute yada position:fixed gibi element kullandığımızı var sayalım, bu elementlerin hangisi üstte yada hangisi diğerinin altında kalacak gibi durumları z-index ile çözmek mümkün. Z-index değeri büyük olan mutlak yapı üstte , küçük olan ise altta kalıcaktır.

 

See the Pen Kpozdj by MinimalCoding (@MinimalCoding) on CodePen.