Position:fixed и его практическое применение

20 марта 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Сразу оговорюсь, что всё нижесказанное — сугубо личное мнение из сугубо личного опыта. Кому-то, может быть, удобней иначе.

По мере ухода со сцены IE6 появляется возможность использовать продвинутые свойства css. Position:fixed — из их числа. Фиксированное позиционирование отличается от других видов позиционирования тем, что прилепляет позиционированный блок к видимой части страницы (визуально — к окну браузера). То есть, при пролистывании страницы блок с этим свойством всегда остаётся видимым.

Казалось бы, очень интересное свойство, но на его применение нашлись ограничения:

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

Для чего используют фиксированное позиционирование? Например, для элементов навигации. Позиционированное вертикальное или горизонтальное меню может «скользить» по странице, оставаясь всегда видимым. Однако здесь мы и сталкиваемся с ограничениями: вертикальное меню не может содержать много развёрнутых пунктов, чтобы не оказаться длинее экрана, и, к тому же, под него нужно оставить пустой всю боковую колонку. Более практичным выглядит применение фиксированного позиционирования для узких вертикальных панелек сбоку страницы. В них обычно располагают кнопки подписки на сайт, на соцзакладки и на профили в соцсетях. Для узкой панельки с пиктограммами «полосу скольжения» выделить проще.

Горизонтальные фиксированные меню явно удобнее: они, как правило, образуют прилипающую к верхнему или нижнему краю окна панельку, под которую прокручивается содержание страницы. Однако и с горизонтальной панелькой не всё гладко. Я, например, имею привычку листать сайты с клавиатуры. Кнопки «page up» и «page down» пролистывают страницу аккуратно на один экран и ничего не знают о приклеенной к его краю панельке. В результате несколько строк текста пропадают под этой самой панелькой и приходится крутить экран обратно стрелкой или мышкой. Удобство пропадает. Поэтому чем уже по высоте такая панелька, тем лучше.

Примечание: советы «пролистывать экран по другому» я не принимаю. Это мой экран.

А вот где position:fixed может быть реально удобен, так это в скриптовых фотогалереях, открывающих большую картинку посреди экрана. Обычно для них используют абсолютное позиционирование с пересчётом положения (left, top) для каждой картинки, исходя из её размеров. Position:fixed позволяет обойтись без пересчёта и центрировать картинки одними стилями.

А какие виды применения position:fixed предпочитаете вы?

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.