Как происходит позиционирование элементов в CSS?

В данном ответе речь пойдет о том, как же происходит позиционирование элементов на CSS. Начать стоит с определения. Позиционирование в CSS — это управления способом и местом отображения элемента на странице созданного сайта, которое осуществляется с помощью свойства position. Сразу хочется отметить, что данное свойство имеет 4 значения: absolute (абсолютное), relative (относительное), fixed (фиксированное) и static (статическое). А теперь давайте более подробно рассмотрим каждое из них.

При фиксированном позиционировании все элементы располагаются на веб-странице относительно окна браузера. Подобные элементы не входят в общий порядок размещения на странице и могут быть наложены поверх других элементов. При прокрутке длинных страниц, благодаря ним создается эффект неподвижности объектов.

При статическом позиционировании всем элементами на странице задаются параметры по умолчанию. Отображаются они в браузере в нисходящем порядке. Используя значение static, при необходимости вы сможете задать статическое позиционирование в таблице стилей.

При относительном — элементы обычно используются в качестве родителя для элементов с абсолютным позиционированием. На странице остается пустое пространство в тех местах, где мог бы находится данный элемент без позиционирования, в то время как он размещен относительно того места, где должен был появится на странице.

И конец, абсолютное позиционирование, при котором элементы удаляются из общего потока страницы и перемещают его на самый верх веб-станицы, при необходимости перекрывая другие элементы.