Absoliutus pozicionavimas be koordinačių CSS
Iš tikrųjų nurodyti koordinates atliekant absoliutųjį
pozicionavimą nėra būtina. Jei elementui
tiesiog parašysime position reikšmėje
absolute, jis taps absoliučiai pozicionuotas,
bet liks stovėti toje pačioje vietoje, kur ir
stovėjo. Tuo tarpu visi kiti elementai elgsis
taip, tarsi mūsų elemento nebūtų
ir gali užlipti ant jo.
Pažiūrėkime pavyzdžiais.
Pavyzdys
Pirmiausia tiesiog sukurkime tris blokus be pozicionavimo ir tarp jų šiek tiek teksto:
<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;
}
:
Pavyzdys
O dabar pridėkime žaliąjam blokui absolute.
Dėl to šis blokas liks savo vietoje,
o visi elementai iš apačios elgsis taip,
tarsi mūsų elemento nebūtų ir užlips ant jo:
<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;
}
:
Pavyzdys
O dabar pridėkime savybę left,
nepridedant vertikalios pozicijos. Dėl to
horizontaliai mūsų blokas atsistos nurodyta
reikšme, o vertikaliai - liks stovėti
ten, kur ir stovėjo:
<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; /* pridedame horizontalią poziciją */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Pavyzdys
Dabar, atvirkščiai, pridėkime savybę
top, nepridedant horizontalios pozicijos.
Dėl to vertikaliai mūsų blokas atsistos
nurodyta reikšme, o horizontaliai -
liks stovėti ten, kur ir stovėjo:
<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; /* pridedame vertikalią poziciją */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
