Merhaba arkadaşlar bu yazımda sizlere CSS’deki Position özelliklerinden bahsedeceğim. Position özellikleri bize elementin sayfadaki pozisyonunu belirlememizi sağlamaktadır. Bir elemente Position özelliğini verdikten sonra elemente top, bottom, left ve right gibi özellikler ile sayfadaki final pozisyonunun nasıl olacağını belirtebiliriz.

Position özelliğine 5 farklı değer verebilmekteyiz bunlar,

  • static
  • relative
  • absolute
  • fixed
  • sticky

Şimdi bu özelliklerin ne işe yaradıklarını anlatmak gerekirse

static

Static değeri verilmiş bir element sayfanın olması gerektiği gibi olmasını sağlar. Top, Bottom, Left, Right ve ya z-index özelliklerinin hiç biri bu değer de işlevi yoktur. Bu ön tanımlanmış bir değerdir.

relative

Relative değeri verilmiş element bulunduğu yere göre top, left, bottom, right özellikleri ilerleyecektir. Bunu kelimelerle anlatmak biraz kafanızı karıştırmış olabilir bu yüzden ben size hazırlamış olduğum fotoğraf ile anlatmak istiyorum.

Burada öncelikle ortadaki kutuya position: relative özelliğini verdik ve daha sonra top: 20px left: 20px özelliklerini verdik.

.box-2{
   position: relative;
   top:20px;
   left:20px;
}

absolute

Absolute değeri verilmiş element relative benzer bir özelliği vardır aradaki tek fark artık direkt olarak web sayfasının sol üst tarafı orijin olarak kabul edilir. Yani bir elemente absolute özelliği verirseniz top, left, bottom, right özelliği verdiğimiz de sayfanın sol üst kısmından bu işlemleri verecektir.

.box-2{
   position: absolute;
   top:  20px;
   left: 20px;
}

fixed

Fixed değeri verilmiş element, bu element sayfa yukarı veya aşağı çekilse bile element sayfanın belirlenen kısmında sabit olarak bulunacaktır. Bu elementin bulunacağı yeri top, left, bottom, right özellikleri ile belirleyebiliriz.

Örnek olarak eğer elementin sayfanın sağ alt kısmında bulunmasını istiyorsak şu css kodlarını yazmamız yeterli olacaktır.

.box{
   position: fixed;
   bottom: 0;
   right:  0;
}

kodunu yazdıktan sonra sayfanın sağ altında bulunacak elemente box adlı class değerini verirsek o element sayfanın sağ alt kısmında bulunacaktır.

sticky

Sticky değeri verilmiş bir element, relative ve fixed özellikleri arasında döner. Sayfada bulunduğu yere göre dururken eğer sayfanızı aşağı ve ya yukarı doğru kaydırırken bu elementten kurtulmaya çalıştığınız da fixed özelliği verilmiş bir element gibi davranmaya başlar ve element asıl olduğu yere geldiğinde tekrar relative bir elementmiş gibi davranmaya devam eder.

Buna örnek vermek gerekirse

Gördüğünüz gibi element kendi yerindeyken relative gibi davranırken sayfayı aşağı doğru kaydırmaya başladığımda fixed değeri verilmiş bir element gibi davranmaya başlıyor sayfayı tekrar yukarı kaydırdığımızda ve elementin asıl olması gereken yere geldiğinde tekrar relative olmaya devam ediyor.

Özet,

Bu yazımda sizlere CSS Position özelliklerinden bahsettim. Position özellikleri static, relative, absolute, fixed, sticky olmak üzere 5 farklı değer alabilmektedir. Herhangi bir elemente Position özelliği verilirse bu elemente top, bottom, left ve right gibi özellikler verirken atanan position değerine göre sayfada nasıl bir pozisyonda bulunacağını belirleriz.

Eğer bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Ayrıca CSS Position Özellikleri hakkında daha detaylı bilgi almak isterseniz buraya tıklayınız.