CSSda elementlarning nisbiy pozitsiyalashuvi
Nisbiy pozitsiyalash position xususiyati uchun
relative qiymati orqali belgilanadi.
Bunday pozitsiyalash elementlarga o'zining joriy
holatidan berilgan miqdorga siljish imkonini beradi.
Bunda sahifaning boshqa barcha elementlari element
o'zining boshlang'ich joyida turgan deb hisoblaydi.
Ya'ni, bunday turdagi pozitsiyalashda element
normal oqimdan chiqib ketmaydi.
Joriy holatdan siljishlar top, right,
bottom va left xususiyatlari orqali belgilanadi.
Misol
Boshlanish uchun keling, shunchaki pozitsiyalashsiz ikki blok yarataylik:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Misol
Keling endi birinchi blokka relative qo'shaylik.
Bu hozircha hech narsani o'zgartirmaydi, chunki
biz blokning siljishini ko'rsatmadik:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Misol
Keling endi blokimizni top xususiyatini belgilab,
yuqoridan 30px surib ko'ramiz. Bunda
boshqa barcha elementlar bizning blok
o'zining boshlang'ich joyida qolgandek
harakat qiladi:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Misol
Keling shuningdek, blokimizni left xususiyatini
belgilab, chapdan 40px surib ko'ramiz:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Misol
top, right, bottom va
left xususiyatlarining salbiy qiymatlari
teskari yo'nalishda siljiydi. Masalan, top ning
ijobiy qiymati pastga siljiydi, salbiy qiymati esa yuqoriga.
Keling ikkinchi blokimizni top xususiyatiga
salbiy qiymat berib, yuqoriga 40px suramiz:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Amaliy vazifalar
Quyidagi bloklar berilgan:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Ushbu bloklarni nisbiy pozitsiyalash yordamida quyidagicha siljiting:
