- absolute positioning → kesin konumlandırma
- relative positioning → göreceli konumlandırma
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:
Hiç yorum yok:
Yorum Gönderme