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:

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

Результат:

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:

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

Результат:

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:

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; /* 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:

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; /* 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;
}

Результат: