Günümüzde bir web sitesi kodlarken en çok dikkat ettiğimiz konu nesnelerin konumları. Özellikle responsive sitelerin artık oldukça yaygın olduğunu düşünürsek, konumların önemi kat kat daha fazla diyebiliriz. Bu noktada ise bizlere büyük kolaylık sağlayan bir css kodu mevcut : Position.
Css position elementi eski yapılan tasarımlarda pek olmasa artık günümüzün web sitelerinde olmazsa olmaz özelliklerinden biri durumunda. Eski web site kodlamalarında sıralı divler (yan yana divler) kullanırken positionlarında katkısıyla artık bağımsız divler kullanıyoruz. Positionların da büyük katkısıyla css ile ilgili en iyi şeylerden biri, içeriği ve öğeleri sayfada akla gelebilecek herhangi bir yere herhangi bir şekilde konumlandırıp tasarımı tamamlamamıza, içeriği daha kullanışlı ve güzel bir şekilde sunmamızı sağlamaktadır.
Positionlar kendi içinde farklı türleri vardır. Her birinin de ayrı bir kullanımı mevcuttur. Kısaca hepsinden bahsedelim isterseniz :
Position: fixed;
Position olarak fixed uygulanan nesne scrolla (kaydırma çubuğu) göre hareket eder. Ve sayfa aşağı ya da yukarı kaydırılmış olsa bile konumlandırıldığı yer neresi ise orada kalmaya devam eder. Top, right, bottom ve left özelliklerini kullanarak HTML öğesini sayfanın istenilen pozisyonuna sabit konumlanmasını sağlayabilirsiniz.
Position: absolute;
Yukarda bahsettiğimiz fixed özelliğiyle hemen hemen aynı özelliklere sahiptir absolute. Aralarında ki fark ise absolute kendisini kapsayan nesneye göre konumunu almaktadır. Yine aynı şekilde top, right, bottom ve left özelliklerini kullanarak HTML öğesini sayfanın istenilen pozisyonuna konumlanmasını sağlayabilirsiniz.
Position: sticky;
Sticky kaydırma konumuna dayalı olarak konumlandırma yapar. Sticky uygulanmış bir öğe kaydırma konumuna bağlı olarak relative ve fixed konumlandırmalar arasında geçiş yapar. Görünüm alanında belirli bir ofset konumu sağlanıncaya kadar relative olarak konumlandırılır. Daha sonra fixed gibi sayfa kaydırılsa bile öğe sabit bir konumda durur.
Position: relative;
Nispeten konumlandırılmış bir öğenin görüntüleme konumunu, kutu ofset özellikleri ile değiştirilmesini sağlar. Yine aynı şekilde top, right, bottom ve left özelliklerini kullanarak HTML öğesini sayfanın istenilen pozisyonuna konumlanmasını sağlayabilirsiniz. Ancak bu durum öğenin normal konumundan uzaklaşmasına neden olabilir.
Position: static;
Varsayılan olarak her elemanın position değeri static olarak kabul eder. Açıklayacak olursak belgenin normal akışında var olduğu ve herhangi bir kutu ofset özelliğini kabul etmediği anlamına gelir.
Evet bu yazımızda css nesnelerinden biri olan position ve onun türlerini sizlere anlatmaya çalıştık. Bir web sitesi kodlama da artık olmazsa olma konumda olan positionlar bu alanda daha uzun senelerce barınmaya devam edeceklerdir.
