Как задать позицию в CSS

Для задания позиции элемента в CSS используются свойства position, top, right, bottom, left.

Свойство position определяет тип позиционирования элемента. Возможные значения:

• static (по умолчанию) – элемент позиционируется в соответствии с обычным потоком документа;
• relative – элемент позиционируется относительно своего обычного положения в потоке документа;
• absolute – элемент позиционируется относительно ближайшего позиционированного родителя (если такой есть), иначе – относительно body;
• fixed – элемент позиционируется относительно окна браузера и остается на месте при прокрутке страницы.

Свойства top, right, bottom, left задают расстояние от соответствующей стороны элемента до соответствующей границы родительского элемента (или окна браузера для элемента с position: fixed).

Примеры:

/* Позиционирование элемента в правом верхнем углу */
.element {
  position: absolute;
  top: 0;
  right: 0;
}

/* Позиционирование элемента внизу страницы */
.element {
  position: fixed;
  left: 0;
  bottom: 0;
}