Position nesnemizi istediğimiz yere konumlandırmayı sağlıyor.

Position ile herhangi bir nesneye position değeri atayarak istediğimiz yere konumlandırabiliyoruz.

Yazının devamında div’in position özelliğinin aldığı değerleri bulabilirsiniz.

Position:static;

Bu özellik postion’un standart değeridir. Adı üzerinde dinamik değil statiktir. Bu değeri atadığınız öğe hiç bir yere kıpırdamadan sabit durur. 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. “˜Relative’ gibi yine “˜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 yaziyi 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ınakonumlandı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 kalmaz, tersine bulunduğu yerde asılı kalır. Sayfadaki diğer öğeler aşağıya inseler bile, öğe inmeyecek ve pozisyonlandığı yerde kalacaktır.

Dikkat: 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.