Абсолютное позиционирование: основы и примеры

Абсолютное позиционирование (absolute position) - это метод, который используется для позиционирования элементов на веб-странице. При использовании этого метода позиционирование происходит относительно ближайшего родительского элемента, который имеет позиционирование "position: relative;" или "position:absolute;".

Пример:

html

  

    Этот элемент находится на расстоянии 20px сверху и 50px слева относительно ближайшего родительского блока с position: relative;
  

В данном примере внешний элемент имеет позиционирование "position: relative;", что мы используем чтобы определить первоначальное положение блока внутри него (относительно верхнего левого угла родительской области).

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

Для того, чтобы использовать абсолютное позиционирование, необходимо указать значения для как минимум двух свойств: "top" (верхняя граница элемента относительно верхней границы блока) и "left" (левая граница элемента относительно левой границы блока). Также можно использовать свойства "right" и "bottom", чтобы позиционировать элемент от правой и нижней границ соответственно.

Дизайнеры часто используют абсолютное позиционирование для создания всплывающих окон (pop-up’ов), подсказок (tooltips) или других элементов, которые должны располагаться на определенном месте на странице. Однако следует помнить, что относительная позиция (position: relative) является более предпочтительной, т.к. она обеспечивает большую гибкость и удобство управления элементами на странице.