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:

html<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}

Результат:

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:

html<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}

Результат:

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:

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

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

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

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

Результат: