Sizlere Position türlerinden ve ne işe yaradığından bahsedeceğim. CSS kullanırken en çok başınızı ağrıtacak özellik position özelliğidir. DIV içinde DIV kullanırken yada 2'den fazla DIV’in birbirine hizalaması bakımından özelliğini belirtmeniz position ile yapılmaktadır.
Position:static;
Bu özellik postion’un standart değeridir. Bu değeri atadığınız öğe hiç bir yere kıpırdamadan sabit durur.Çünkü statiktir. Ayrıca position özelliğine static verilen bir öğeye top, bottom, left ve right gibi değerleri atarsanız bu özellikler position’un static olduğundan çalışmaz.
Position:relative;
Relative özelliği ile nesnemizi kaydırma imkanına sahip oluyoruz. Ancak bu nesne diğer nesnelerin üzerinde oluyor. Photoshop’dan bir örnek verirsek en üstteki layer position’a relative verilen nesne oluyor ve bu layerdaki nesnemiz en üstte olduğu için nereye taşırsak taşıyalım bu nesnemiz en üstte olacaktır. Örnek olarak;
#yazi {position: relative; top: 15px; left: 20px; right: 0; }
Position:absolute;
Bu değerleri atadığınız bir öğe, diğer öğelerin etkisi olmadan sayfa başından itibaren kaydırılmaya başlanacaktır. Absolute’un diğer öğelere etkisi olmayacaktır.
#yazi {position: absolute; top: 0; right: 0; }
Bu şekildeki bir stil, önceden oluşturduğumuz “˜yazi’ stilinin içindeki yazıyı sayfanın en üst-sağ köşesine konumlandırılacaktır.
#yazi {position: absolute; bottom: 0; right: 5px; }
Bu şekildeki diğer bir stil ise, yazımızı sayfanın en altına konumlandıracak, sağ köşeden 5 piksel kaydıracaktır.
Position:fixed;
Fixed değeri nesnemizi aynı absolute gibi pozisyonlar, fakat sayfa aşağıya kaydırıldığında öğe de sayfa ile birlikte aşağıya kaymaz, tersine bulunduğu yerde kalır. Sayfadaki diğer öğeler aşağıya inseler bile, öğe inmeyecek ve pozisyonlandığı yerde kalacaktır.Ancak Internet Explorer 7 bu özelliği hatalı yorumladığı için, herşey doğru olmasına rağmen, position:fixed; değerini atadığınız bir öğe sayfa ile birlikte aşağı kayacaktır.
Hiç yorum yok:
Yorum Gönder