Координаттарсыз абсолюттук позициялоо CSSте
Чынында, абсолюттук позициялоодо координаттарды көрсөтүү милдеттүү эмес. Эгер элементке
жөн эле position деп absolute маанисинде жазсак, анда ал абсолюттук позицияланган
болот, бирок турган жеринде кала берет. Бул учурда калган бардык элементтер биздин элемент
жок сыяктуу мамиле кылып, анын үстүнө чыгып кетиши мүмкүн.
Келгиле, мисалдарды карап көрөлү.
Мисал
Башында, келгиле жөн эле үч блок жасап, алардын ортосунда бир аз текст коёлу:
<div id="elem1"></div>
<div id="elem2"></div>
текст текст текст текст текст текст
<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;
}
:
Мисал
Эми келгиле жашыл блокко absolute кошуп көрөлү.
Натыйжада бул блок өз жеринде калат,
ал эми төмөндөгү бардык элементтер биздин элемент
жок сыяктуу мамиле кылып, анын үстүнө чыгып кетишет:
<div id="elem1"></div>
<div id="elem2"></div>
текст текст текст текст текст текст
<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;
}
:
Мисал
Эми келгиле left касиетин кошуп көрөлү,
тик багыттагы позицияны кошпой. Натыйжада
көлдөмдүк багытта биздин блок көрсөтүлгөн
мааниге жайгашат, ал эми тик багытта - турган
жеринде кала берет:
<div id="elem1"></div>
<div id="elem2"></div>
текст текст текст текст текст текст
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* көлдөмдүк багыттагы позицияны кошуу */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Мисал
Эми келгиле, тескерисинче, top касиетин кошуп көрөлү,
көлдөмдүк багыттагы позицияны кошпой.
Натыйжада тик багытта биздин блок
көрсөтүлгөн мааниге жайгашат, ал эми көлдөмдүк багытта -
турган жеринде кала берет:
<div id="elem1"></div>
<div id="elem2"></div>
текст текст текст текст текст текст
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* тик багыттагы позицияны кошуу */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
