CSS'te Konumlandırmada Negatif Değerler
Öğrendiğimiz top, right,
bottom ve left özellikleri
sadece pozitif değil, aynı zamanda negatif
değerler de alabilir. Örneklerle inceleyelim.
Örnek
Aşağıdaki örnekte eleman, ebeveynine göre mutlak konumlandırılmıştır
ve üstten 0, soldan 0 pozisyonundadır:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Örnek
Şimdi ise elemanı üstten -20px,
soldan -30px pozisyonuna taşıyalım:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Aşağıdaki örnekte yeşil kutu, margin ile
ekranın ortasında duruyor ve kırmızı kutular
ona göre konumlandırılıyor. Sayfayı verilen
örneğe göre tekrarlayın:
