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:

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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;
}

Результат: