Absolútne pozicionovanie bez súradníc v CSS
V skutočnosti nie je pri absolútnom
pozicionovaní nutné uvádzať súradnice. Ak elementu
jednoducho napíšeme position s hodnotou
absolute, stane sa absolútne pozicionovaným,
ale zostane na tom istom mieste, kde
bol. Zatiaľ čo všetky ostatné elementy sa budú
správať tak, ako keby náš element neexistoval
a môžu naň prekrytne naliať.
Pozrime sa na príklady.
Príklad
Na začiatok jednoducho vytvorme tri bloky bez pozicionovania a medzi nimi nejaký text:
<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;
}
:
Príklad
A teraz pridajme zelenému bloku absolute.
Výsledkom bude, že tento blok zostane na mieste,
ale všetky elementy pod ním sa budú správať tak,
ako keby náš element neexistoval a prekryjú ho:
<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;
}
:
Príklad
A teraz pridajme vlastnosť left,
bez pridania pozície podľa vertikály. Výsledkom
bude, že v horizontálnom smere sa náš blok posunie na zadanú
hodnotu, ale vo vertikálnom smere - zostane
tam, kde bol:
<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; /* pridáme pozíciu podľa horizontály */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Príklad
Teraz naopak, pridajme vlastnosť
top, bez pridania pozície podľa horizontály.
Výsledkom bude, že vo vertikálnom smere sa náš blok posunie
na zadanú hodnotu, ale v horizontálnom smere -
zostane tam, kde bol:
<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; /* pridáme pozíciu podľa vertikály */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
