Absolutní pozicování bez souřadnic v CSS
Ve skutečnosti není zadání souřadnic při absolutním
pozicování povinné. Pokud elementu
prostě napíšeme position s hodnotou
absolute, stane se absolutně pozicovaným,
ale zůstane stát na stejném místě, kde
stál. Přitom se všechny ostatní elementy budou
chovat tak, jako by náš element nebyl
a mohou na něj najet.
Podívejme se na příkladech.
Příklad
Pro začátek udělejme tři bloky bez pozicování a mezi nimi nějaký 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;
}
:
Příklad
A nyní přidejme zelenému bloku absolute.
Výsledkem bude, že tento blok zůstane na místě,
ale všechny elementy pod ním se budou chovat tak,
jako by náš element nebyl a najedou na něj:
<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;
}
:
Příklad
Nyní přidejme vlastnost left,
aniž bychom přidali pozici podle svislé osy. Výsledkem
bude, že vodorovně se náš blok posune na zadanou
hodnotu, ale svisle zůstane stát
tam, kde stál:
<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; /* přidáme pozici podle vodorovné osy */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Příklad
Nyní naopak přidejme vlastnost
top, aniž bychom přidali pozici podle vodorovné osy.
Výsledkem bude, že svisle se náš blok posune
na zadanou hodnotu, ale vodorovně -
zůstane stát tam, kde stál:
<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; /* přidáme pozici podle svislé osy */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
