CSS позиционирование

В современной верстке все больше нестандартных расположений элементов. Свойство position помогает решить эту проблему.

Position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на веб-странице.

Значения:

• static - элемент позиционируется относительно родителя и соседних элементов relative - элемент позиционируется как static, но можно двигать его относительно своего положения. Значение по умолчанию. Нельзя использовать свойства top, bottom, right, left
• absolute - элемент позиционируется относительно ближайшего родителя с relative, absolute, fixed. Если у родителя значение position: static или родителя нет, то отсчет ведется от края окна браузера. При position: absolute, объект как-будто вырывается из структуры и он не влияет на другие элементы, а его место занимает другой объект.
• fixed - элемент позиционируется относительно окна браузера. Он фиксируется и при прокрутке остается на своем месте. Например, применяется для липкой шапки.
• sticky - элемент позиционируется как static но когда верхняя граница элемента будет находиться на расстоянии, указанном в параметре top, от верхней границы окна браузера (либо указанном в параметре bottom от нижней), он останется в этом положении относительно окна до тех пор пока его нижняя граница не упрется в другой sticky элемент или конец родительского элемента

Вспомогательные cвойства: top, bottom, left и right управляют положением элемента сверху снизу слева и справа, а z-index управляет наложением друг на друга по оси Z.. Значения могут указываются в том числе в процентах и могут иметь отрицательные значения. (Применяется для relative, absolute, fixed, sticky)

.block{
 position: absolute;
 top: 20px;
 left: 50%;
}

Подробная статья: https://developer.mozilla.org/ru/docs/Web/CSS/position

Наглядные примеры: https://fls.guru/cssposition.html