CSS'te Koordinatsız Mutlak Konumlandırma
Aslında mutlak konumlandırmada koordinat belirtmek
zorunlu değildir. Bir elemana sadece
position değeri olarak
absolute yazılırsa, mutlak konumlandırılmış
olur, ancak bulunduğu yerde durmaya devam eder.
Bu durumda diğer tüm elemanlar, bizim elemanımız
yokmuş gibi davranır ve üzerine gelebilir.
Örneklerle inceleyelim.
Örnek
Öncelikle konumlandırma uygulamadan üç blok ve aralarında bir miktar metin oluşturalım:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Örnek
Şimdi yeşil bloğa absolute ekleyelim.
Sonuç olarak bu blok yerinde kalacak,
ancak alttaki tüm elemanlar bizim elemanımız
yokmuş gibi davranacak ve üzerine gelecek:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Örnek
Şimdi dikey konum eklemeden left özelliğini
ekleyelim. Sonuçta bloğumuz yatayda belirtilen
değere konumlanacak, dikeyde ise durduğu
yerde kalacak:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* yatay konum ekliyoruz */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Örnek
Şimdi tam tersine, yatay konum eklemeden
top özelliğini ekleyelim.
Sonuçta bloğumuz dikeyde belirtilen değere
konumlanacak, yatayda ise durduğu
yerde kalacak:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* dikey konum ekliyoruz */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
