Absolutno pozicioniranje brez koordinat v CSS
Pravzaprav navedba koordinat pri absolutnem
pozicioniranju ni obvezna. Če elementu
preprosto napišemo position v vrednosti
absolute, bo postal absolutno pozicioniran,
vendar bo ostal na istem mestu, kjer je
stal. Pri tem se bodo vsi drugi elementi
obnašali, kot da našega elementa ni
in lahko prekrijejo njega.
Poglejmo si na primerih.
Primer
Za začetek naredimo tri bloke brez pozicioniranja in med njimi nekaj besedila:
<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;
}
:
Primer
In zdaj dodajmo zelenemu bloku absolute.
Kot rezultat bo ta blok ostal na mestu,
vsi elementi spodaj pa se bodo obnašali,
kot da našega elementa ni in ga bodo prekrili:
<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;
}
:
Primer
Zdaj pa dodajmo lastnost left,
brez da bi dodali pozicijo po vertikali. Kot rezultat
bo naš blok po horizontali zavzel navedeno
vrednost, po vertikali pa bo ostal
tam, kjer je stal:
<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; /* dodamo pozicijo po horizontali */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Primer
Zdaj pa, nasprotno, dodajmo lastnost
top, brez da bi dodali pozicijo po horizontali.
Kot rezultat bo naš blok po vertikali zavzel
navedeno vrednost, po horizontali pa
bo ostal tam, kjer je stal:
<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; /* dodamo pozicijo po vertikali */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
