Апсолутно позиционирање без координата у CSS-у

Заправо, навођење координата при апсолутном позиционирању није обавезно. Ако се елементу једноставно напише position у вредности absolute, он ће постати апсолутно позициониран, али ће остати да стоји на истом месту где је и био. Притом ће се сви остали елементи понашати као да нашег елемента нема и могу да преклопију њега.

Хајде да погледамо на примерима.

Пример

За почетак хајде да једноставно направимо три блока без позиционирања и између њих неки текст:

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

Результат:

Пример

А сада хајде да додамо зеленом блоку absolute. Као резултат, овај блок ће остати на месту, а сви елементи испод ће се понашати тако, као да нашег елемента нема и преклопиће га:

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

Результат:

Пример

А сада хајде да додамо својство left, без додавања позиције по вертикали. Као резултат по хоризонтали наш блок ће се поставити на наведену вредност, а по вертикали – остаће да стоји тамо где је и стајао:

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; /* додајемо позицију по хоризонтали */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Пример

Сада хајде, обрнуто, да додамо својство top, без додавања позиције по хоризонтали. Као резултат по вертикали наш блок ће се поставити на наведену вредност, а по хоризонтали – остаће да стоји тамо где је и стајао:

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; /* додајемо позицију по вертикали */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: