Абсолютне позиціонування без координат у CSS

Абсолютне позиціонування без координат у CSS

При використанні position: absolute не обов'язково одразу задавати координати top, left, right або bottom.

Якщо елементу задати тільки position: absolute, він залишиться приблизно на тому місці, де знаходився раніше.

Але такий елемент все одно випаде з нормального потоку документа. Інші елементи будуть поводитися так, ніби цього елемента немає.

Блоки без позиціонування

Спочатку створимо три блоки та текст між ними без використання позиціонування.

<div id="elem1"></div>
<div id="elem2"></div>

text text text text text text

<div id="elem3"></div>

#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 без координат

Додамо другому блоку position: absolute, але не будемо задавати координати.

Блок залишиться на своєму місці, але інші елементи більше не будуть враховувати його розмір.

#elem2 {
  position: absolute;

  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}

Absolute тільки з left

Якщо задати тільки left, елемент зміститься по горизонталі, а вертикальне положення залишиться без змін.

#elem2 {
  position: absolute;
  left: 40px;

  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Absolute тільки з top

Якщо задати тільки top, елемент зміститься по вертикалі, а горизонтальне положення залишиться таким самим.

#elem2 {
  position: absolute;
  top: 100px;

  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Головна особливість absolute

• position: absolute прибирає елемент із нормального потоку.
• Координати top, left, right, bottom є необов'язковими.
• Без координат елемент залишається на початковій позиції.
• Інші елементи не займають місце абсолютного елемента.

Практичні завдання

.element {
  position: absolute;
}