CSSda koordinatalarsiz absolyut pozitsionlash
Aslida absolyut pozitsionlashda koordinatalarni
ko'rsatish shart emas. Agar elementga shunchaki
position xususiyatini absolute
qiymatida yozsak, u absolyut pozitsiyalangan
bo'ladi, lekin o'z joyida turadi. Bunda boshqa
barcha elementlar bizning element yo'qdek
harakat qiladi va uning ustiga chiqishi mumkin.
Keling, misollar orqali ko'rib chiqaylik.
Misol
Boshlash uchun keling, uchta blok yarataylik pozitsionlashsiz va ular orasiga ba'zi matn qo'shaylik:
<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;
}
:
Misol
Endi keling, yashil blokka absolute qo'shaylik.
Natijada bu blok o'z joyida qoladi,
lekin pastdagi barcha elementlar bizning
element yo'qdek harakat qiladi va uning ustiga chiqadi:
<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;
}
:
Misol
Endi keling, left xususiyatini qo'shaylik,
vertikal pozitsiyani qo'shmasdan. Natijada
gorizontal yo'nalishda bizning blok ko'rsatilgan
qiymatga ko'chadi, vertikal yo'nalishda esa
o'z joyida qoladi:
<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; /* gorizontal pozitsiya qo'shamiz */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Misol
Endi esa, aksincha, top xususiyatini
qo'shaylik, gorizontal pozitsiyani qo'shmasdan.
Natijada vertikal yo'nalishda bizning blok
ko'rsatilgan qiymatga ko'chadi, gorizontal
yo'nalishda esa o'z joyida qoladi:
<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; /* vertikal pozitsiya qo'shamiz */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
