absolute ve relative ne işe yarar?

Absolute ve relative CSS'de pozisyonlama için kullanılır, ancak tam olarak ne işe yaradığını bilmiyor olabiliriz. Bu yüzden bu yazıda tam olarak ne işe yaradığını göstermeye çalışacağım. absolute ve relative parametreleri, position için kullanılır:

• absolute positioning → kesin konumlandırma
• relative positioning → göreceli konumlandırma

Herhangi bir durumda position kullanılmadığında varsayılan olarak position, static davranış gösterir. Buna göre bir element sayfanın normal akışına göre konumlandırılır. top, right, bottom, left ve z-index özellikleri bu durumda kullanılamaz.

position: relative; sayesinde içinde bulunduğu düzeni değiştirmeden eski konumuna bağlı olarak geçerli bir konuma konumlandırmadır.

position: absolute; ile içinde bulunduğu en yakın parent(ebeveyn) elemana göre konumlandırma yapar.

Şimdi birkaç uygulama yapalım ve elde edilen görüntüleri inceleyelim:

.parent{
    width: 300px;
    margin: auto;
}

.box{
    width: 33%;
    float:left;
    height: 100px;
}

.clear{
    clear: both;
}

#child-1, #child-3{
    background:#465988;
}

#child-2 {
    background:#22a316;
}

<div class="parent">
 <div class="box" id="child-1"></div>
 <div class="box" id="child-2"></div>
 <div class="box" id="child-3"></div>
 <div class="clear"></div>
</div>

Elde ettiğimiz görüntü ise aşağıdaki gibi:

Yukarıdaki durum static pozisyonlandırmaya örnektir. Şimdi relative pozisyonlandırma yapalım:

#child-2 {
    position: relative;
    background:#22a316;
    top: 5px;
    left: 20px;
}

Aşağıda görüldüğü gibi sadece o nesne için pozisyon değişmektedir:

Absolute konumlandırmaya bakalım:

.parent{
    position: relative;
    width: 300px;
    margin: auto;
}

#child-2 {
    position: absolute;
    background:#22a316;
    top: 5px;
    left: 20px;
}

Görüldüğü gibi aşağıdaki durum olacaktır: