Абсалютнае пазіцыянаванне без каардынат у 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;
}

Результат: