CSS “Position” Özelliği ile Konumlandırma

Bu dersimizde, web tasarımında oldukça önemli bir rol oynayan CSS “position” özelliği konusunu detaylı bir şekilde ele alacağız.

CSS “Position” Özelliği

“Position” kelimesi İngilizcede “konum” veya “pozisyon” anlamına gelmektedir. Kelimenin hakkını verircesine CSS’te de bu özellik, bir elementin sayfa içinde nerede konumlandırılacağını belirtir. Yani, bir öğeyi nereye koyacağımızı, hangi yönde ya da hangi referansla hareket ettireceğimizi “position” özelliği ile ayarlarız.

CSS “position” özelliği, bir elementin sayfa üzerinde konumlandırabilmek için aşağıdaki 5 değerden birini alabilir:

1. position:static;
2. position:relative;
3. position:fixed;
4. position:absloute;
5. position:sticky;

❗ position:static; harici diğer position özellikleri yazılmış herhangi bir element top, bottom, left ve right özellikleri kullanılarak sayfa içinde konumlandırılır.

“position: static;” Kullanımı

HTML elementleri varsayılan olarak position: static; şeklinde konumlandırılır. Yani bu demektir ki, ilgili elementler sayfanın normal akışına göre konumlandırılır. Bu türde top, bottom, left ve right özelliklerine verilen değerler hiçbir etkiye sahip değildir.

See the Pen Position Static by 1kodum (@1kodum) on CodePen.

“position: relative;” Kullanımı

HTML elementleri position: relative; şeklinde konumlandırıldığında, normal konumunu temel alarak onu belirli bir mesafede kaydırmamıza izin verir. Yani doğal olarak yer alacağı yerden top, bottom, left ve right özellikleri kullanılarak varsayılan olarak bulunacağı normal konumuna göre pozisyonlandırır. Örneğin, position: relative; yazılmış bir element top: 10px ile yazılırsa, normal akıştaki konumundan 10px yukarı olacak şekilde hareket edecektir.

❗ Ancak belirtmek gerekir ki, normal akış devam etseydi bulunacağı konum yine ona ait konum özellikleriyle kalmaya devam edecek ve boş olarak kalacaktır. Haliyle position: relative; yazılmış elementlerin bıraktığı boşluğa diğer elementler doldurmayacaktır. Örneğin:

See the Pen position relative by 1kodum (@1kodum) on CodePen.

Yukarıdaki örneğimizde de bu durum net bir şekilde gözlemlenmiştir. Zira div-2 elementine position: relative; yazılmış ve top ve left özellikleri kullanılarak yeni bir konuma atanmıştır. Ancak normal akış devam etseydi bulunacağı konum başka elementlerce doldurulmamış ve boş kalmıştır.

Özetle position: relative; uygulanmış element normal akış devam etseydi bulunacağı konuma göre yeniden konumlandırılmasıdır. Yani top, bottom, left ve right özellikleri o elementi kendisine göre konumlandırır. Normal akıştaki konumu ise kendisinde kalmaya devam eder.

“position: absolute;” Kullanımı

HTML elementleri position: absolute; olarak ayarlandığında ilgili element normal akıştaki konumuna göre değil position: static; harici bir özellik verilmiş ilk ata elementine göre konumlandırılır.

Eğer absolute olarak konumlandırılmış bir elementin böyle bir atası yoksa, belge gövdesini, yani body elementini kullanarak konumlandırılır. Aşağıdaki örneği inceleyiniz:

See the Pen position absolute by 1kodum (@1kodum) on CodePen.

Yukarıdaki örneğimizde position: absolute; uygulanmış div-3 elementimiz, left ve top özellikleri girilerek normal akış devam etseydi bulunacağı bölgeye göre değil ilk atası olan container elementine bakmıştır. Ancak ilk ata elementi de position: static; olarak konumlandığı için onu es geçip bir üst ata elementine, yani body elementine göre konumlandırılmıştır.

Eğer ilk ata elementi position: static; harici bir konumlandırma ile yapılsaydı konumlandırma ona göre olacaktı.

See the Pen position absolute 2 by 1kodum (@1kodum) on CodePen.

Ancak normal akış devam etseydi bulunacağı konum ise ardından gelen element tarafından doldurulmuştur. Özetle

• position: absolute; uygulanmış bir element kendisini, konumlandırılmış olan ilk position: static; harici ata elementine göre konumlandırır. Eğer hiçbir ata buna uymazsa, elementimiz body elementine göre konumlandırılır.
• Elementimiz normal akış olsaydı yerleşeceği konumu ise artık kendisine ait olmaktan çıkar ve bir başka elemente tahsis edilir.

“position: fixed;” Kullanımı

HTML elementleri position: fixed; olarak ayarlandığında, görüntü alanına, yani body elementine göre top, bottom, left ve right gibi özellikler kullanılarak konumlandırılmış olur. Bu demektir ki, sayfa kaydırılmış olsa dahi ilgili element her zaman mevcut yerinde kalmaya devam edecek ve ekranda her daim gözükecektir.

Bu değer kullanıldığında, element sayfa içinde doğal akıştaki konumunda yer almayacak ve kaydırma çubuğu (scroll-bar) kaydırıldığında bile mevcut konumunu muhafaza edecektir. Bakınız:

See the Pen position fixed2 by 1kodum (@1kodum) on CodePen.

“position: sticky;” Kullanımı

HTML elementleri position: sticky; olarak ayarlandığında kullanıcının kaydırma çubuğuna (scroll bar) göre konumlandırılır.

Kelime anlamı olarak “sticky” İngilizcede “yapışkan” anlamına geldiğinden “position: sticky;” özelliği, bu yapışkan kavramını oldukça iyi yansıtır.

Bir element “sticky” olarak konumlandırıldığında, belirli bir kaydırma noktasına kadar normal belge akışı içinde yer alır, fakat bu noktaya ulaşıldığında, sanki “fixed” konumlandırma uygulanmış gibi davranarak ekranın belirli bir kısmında sabitlenir. Bakınız:

See the Pen position sticky by 1kodum (@1kodum) on CodePen.

“Sticky” konumlandırma, kullanıcının sayfada kaydırma yaptığı zaman elementin hem belirli bir konumda sabit kalmasını, hem de belirli bir kaydırma noktasına kadar normal belge akışında hareket etmesini sağlar. Bu, kullanıcılara dinamik bir kullanıcı deneyimi sunmamıza olanak tanır.

Ancak position: sticky; özelliği tüm tarayıcılarda desteklenmeyebilir. Bu nedenle, tarayıcı desteğini göz önünde bulundurarak bu özelliiği kullanmalısınız.