CSS Position Absolute: Learn How to Use It for More Creative and Dynamic Web Design

CSS свойство position со значением absolute позиционирует элемент абсолютно относительно родительского элемента или корневого элемента документа, если родительский элемент не указан или не имеет позиционирования.

При использовании position:absolute элемент выводится из потока документа, то есть соседние элементы не реагируют на его наличие и не учитывают его размеры. Он может быть установлен в любую точку родительского элемента и иметь любые размеры.

Например, вот как можно использовать позиционирование элемента при помощи position:absolute:

HTML:

html

  

CSS:

css
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

В примере выше, блок .box имеет абсолютное позиционирование, а блок .container имеет относительное. В результате, блок .box может быть установлен в центре блока .container при помощи свойств top: 50%; left: 50%; и transform:translate(-50%, -50%).

Вывод: свойство position со значением absolute используется для позиционирования элементов абсолютно относительно родительского элемента или корневого элемента документа. Оно выводит элемент из потока документа и позволяет устанавливать его в любое место на странице и задавать произвольные размеры. Важно помнить, что использование position:absolute может повлиять на компоновку элементов на странице и привести к неожиданным результатам.