
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.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.