Свойство «position» в CSS

Каскадные таблицы стилей используются при создании практически любого сайта, кроме, пожалуй, самых простых, в случае с которыми достаточно и простого HTML. С помощью стилей CSS происходит разделение смыслового содержания веб-страницы, и ее дизайнерской составляющей. Это делает любые правки по изменению внешнего вида сайта быстрее и гораздо удобнее.

Свойство «position» в CSS используется для определения порядка расположения одного из элементов относительно других объектов или веб-страницы в целом. В зависимости от того в какой последовательности вы решили определить элементы в документе, так браузер их и отобразит.

Свойство position впервые начало применяться в версии CSS 2, и включает такие значения как absolute | fixed | relative | static | inherit. Оно может применяться ко всем элементам за исключением генерируемых, не подлежит наследованию, а значением по умолчанию является static.

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

«absolute» — при его использовании элемент будет абсолютно позиционирован, а его расположение относительно окна браузера можно определить как top (вверху), bottom (внизу), left (слева) и right (справа).

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

«relative» — позиция элемента привязана к его начальному месту на экране, и применение top, bottom, right и left, приводит к его сдвигу в соответствующем направлении.

«static» — отображение будет в обычном виде, последовательно, согласно определенному в документе порядке.

«inherit» — значение наследуется от родительского элемента.

Свойство position в CSS является удобным средством для позиционирования элементов веб-страницы, упрощая задание управления внешним видом сайта.