Absoluutne positsioneerimine ilma koordinaatideta CSS-is
Tegelikult ei ole koordinaatide määramine absoluutse
positsioneerimise korral kohustuslik. Kui elemendile
lihtsalt kirjutada position väärtusega
absolute, siis muutub see absoluutselt positsioneerituks,
kuid jääb seisma samasse kohta, kus ta
seisis. Samal ajal käituvad kõik teised elemendid
nagu meie elementi poleks olemas
ja võivad selle peale kerkida.
Vaatame näidete varal.
Näide
Alustuseks teeme lihtsalt kolm plokki ilma positsioneerimata ja nende vahele natuke teksti:
<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;
}
:
Näide
Ja nüüd lisame rohelisele plokile absolute.
Selle tulemusena jääb see plokk paigale,
kuid kõik alumised elemendid käituvad nii,
nagu meie elementi poleks olemas ja kerkivad selle peale:
<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;
}
:
Näide
Ja nüüd lisame omaduse left,
lisamata vertikaalset positsiooni. Selle tulemusena
muutub meie plokk horisontaalselt määratud
väärtusele, kuid vertikaalselt jääb ta seisma
sinna, kus ta seisis:
<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; /* lisame horisontaalse positsiooni */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Näide
Nüüd lisame vastupidiselt omaduse
top, lisamata horisontaalset positsiooni.
Selle tulemusena muutub meie plokk
vertikaalselt määratud väärtusele, kuid horisontaalselt -
jääb seisma sinna, kus ta seisis:
<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; /* lisame vertikaalse positsiooni */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
