14/11/2021

CSS Position

CSS Position

CSS position özelliği HTML elemanlarının sayfa içerisindeki konumunu belirlememize yardımcı olan bir özelliktir. Position özelliğinin yanında CSS’in top, bottom, left ve right özellikleri de konumlandırmak için yardımcı olarak kullanılır.

CSS Position Çeşitleri

  • position: static;
  • position: relative;
  • position absolute;
  • position: fixed;
  • position: sticky;

Position Static

Static değeri tüm HTML elemanlarının varsayılan position değeridir. Bir HTML elemanına position değeri verilmezse her zaman static değeri geçerlidir. Position static değerinde top, bottom, right, left ve z-index CSS özellikleri etki göstermez.

Position Relative

HTML elemanına relative değeri verildiğinde kendi konumunu korur ve top, bottom, left ile right değerleri için sıfıra sıfır noktasını kendi konumu olarak belirler. Sayfa üzerinde top, bottom, left ve right değerleri değiştirildiğinde relative özelliği verilmiş elemanın kapladığı boşluk değişmez static gibi davranır.

<style>
.box {
   display: inline-block;
   width: 100px;
   height: 100px;
   border: 3px solid #000;
   text-align: center;
}
#box-3 {
   position: relative;
   top: 30px;
   left: 30px;
   background-color: #000;
   color: #fff;
}
</style>

<div id="box-1" class="box">box</div>
<div id="box-2" class="box">box</div>
<div id="box-3" class="box">relative box</div>
<div id="box-4" class="box">box</div>
box
box
relative box
box

Position Absolute

Absolute değeri, HTML elemanının sayfa akışı üzerindeki konumunu bozar. Position relative değerinde olduğu gibi kendi kapladığı boşluk static gibi davranıp konumunu korumaz, sayfa akışı kayar. Absolute değeri almış eleman kendisine en yakın olan relative değerine sahip bir üst eleman içerisinde konumlanır. Eğer üstünde relative değerine sahip bir konteyner yoksa, absolute değeri almış eleman sayfanın sol üst köşesinde konumlanır. Top, bottom, left ve right değerleri elemanın sayfa içerisinde konumlanmasına yardımcı olur.

Position Fixed

Fixed değeri absolute değeri ile benzer. Fixed değeri de HTML elemanının sayfa akışı üzerindeki konumunu bozar. Fixed değeri ile HTML elemanı sayfa üzerinde istenilen bir noktaya sabitlenebilir. Top, bottom, left ve right değerleri fixed değeri verilmiş elemanın sayfa içerisinde konumlanmasına yardımcı olur.

Position Sticky

Sticky değeri, relative ile fixed değerlerinin karışımı olarak düşünülebilir. Sticky pozisyonu verilmiş eleman belirli bir eşiği geçene kadar belirtilmiş noktada sabit kalır. Bu belirli nokta ise sticky pozisyonu verilmiş elemanın bir üst konteynır elemanıdır.

Örnek olarak;

.sticky {
   position: sticky;
   top: 20px;
}

Bu CSS özelliği verilmiş bir eleman konteynır elemanın son eşiğine kadar ekranda sabit noktada sayfa yukarısının 20px aşağısında görünür. Top, bottom, left ve right değerleri elemanın sticky pozisyonu ile sayfa içerisinde konumlanmasına yardımcı olur.

Not: Sticky pozisyonunun çalışabilmesi için top özelliğinin eklenmesi gerekir.

Kaynakça :

https://developer.mozilla.org/en-US/docs/Web/CSS/position