Просмотров: 1 466

Фиксированное позиционирование элементов на веб-странице. Свойство CSS position fixed.

Переходим к очередному значению свойства position и на этот раз рассмотрим так называемое фиксированное позиционирование элементов на веб-страницах. За такой вид позиционирования отвечает свойство CSS:

position:fixed;

Что же такое фиксированное позиционирование и чем оно отличается от относительного и абсолютного позиционирования?

Чтобы понять, как все это работает, давайте рассмотрим следующий пример.

Для этого нужно создать блок, который своим содержимым будет перекрывать всю область просмотра браузера. Задача в том, чтобы на экране появилась полоса прокрутки. Далее, под этим элементом разместим блок, которому присвоим свойство position:fixed.

<div>
<p>Содержимое, чтобы заполнить область с просмотром. Содержимое, чтобы заполнить область с просмотром......................</p>
</div>
<div style="background: #c9c; position:fixed; top:0; left:0;">Блок с фиксированным позиционированием</div>

Попробуйте теперь с помощью полосы прокрутки прокрутить окно в примере на jsfiddle. Блок с position fixed всегда будет находится в левом верхнем углу, независимо от того, какое положение занимает полоса прокрутки.

Таким образом, с помощью свойства position:fixed блок можно зафиксировать в нужном месте экрана.

Обратите внимание, что фиксированный блок также выпадает из нормального потока.

Если в случае с абслотным позиционированием мы можем определять блок относительно которого будет происходить позиционирование с помощью свойства position:relative, то с фиксированным позиционированием этот трюк не работает. Блок, которому присваивается свойство position:fixed всегда позиционируется относительно окна содержимого браузера.

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

Может быть видели вот такие кнопки социальных сетей на сайтах, которые фиксируются по какому-либо краю?

04-05-2014 13-20-51

Этот эффект достигается с помощью position fixed.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».