Apsolutno pozicioniranje bez koordinata u CSS
Zapravo, navođenje koordinata pri apsolutnom
pozicioniranju nije obavezno. Ako elementu
jednostavno napišemo position u vrednosti
absolute, onda će on postati apsolutno pozicioniran,
ali će ostati stajati na istom mestu gde je i
stajao. Pritom će se svi ostali elementi
ponašati kao da našeg elementa nema
i mogu da preklope njega.
Pogledajmo na primerima.
Primer
Za početak hajde da jednostavno napravimo tri bloka bez pozicioniranja i između njih neki tekst:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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
A sada hajde da zelenom bloku dodamo absolute.
Kao rezultat, ovaj blok će ostati na mestu,
a svi elementi ispod će se ponašati tako,
kao da našeg elementa nema i preklopiće ga:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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
A sada hajde da dodamo svojstvo left,
ne dodajući poziciju po vertikali. Kao rezultat
po horizontali naš blok će stati na navedenu
vrednost, a po vertikali - ostati stajati
tamo gde je i stajao:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* dodajemo poziciju po horizontali */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Primer
Sada hajde, obrnuto, da dodamo svojstvo
top, ne dodajući poziciju po horizontali.
Kao rezultat po vertikali naš blok će stati
na navedenu vrednost, a po horizontali -
ostati stajati tamo gde je i stajao:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* dodajemo poziciju po vertikali */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
