Логотип imagecms

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

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

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

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

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

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

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

Скачать ImageCMS совершенно бесплатно

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

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

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

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

Читайте также:
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
(Комментарии: 0)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или