Фиксированное позиционирование

Фиксированное позиционирование элемента задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Для фиксированного позиционирования характерны следующие особенности.

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

В остальном, значение fixed похоже на absolute.

Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю. В примере 1 показано добавление «шапки», которая остаётся на одном месте независимо от объёма информации на сайте.

Пример 1. Использование fixed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шапка</title> <style> header { position: fixed; /* Фиксированное позиционирование */ left: 0; right: 0; /* Вся ширина */ top: 0; /* Положение сверху */ padding: 10px; /* Поля вокруг текста */ background: #3989c9; /* Цвет фона */ color: #fff; /* Цвет текста */ } header h1 { margin: 0; /* Убираем отступы */ } main { min-height: 1000px; /* Минимальная высота */ margin-top: 70px; /* Отступ сверху */ display: block; /* Для IE */ } </style> </head> <body> <header><h1>Название сайта</h1></header> <main> <p>Умножение вектора на число, исключая очевидный случай, позиционирует интеграл по поверхности.</p> </main> </body> </html>

Результат примера показан на рис. 1. Поскольку фиксированный элемент накладывается на текст и скрывает его, добавлен отступ сверху для <main>. Тем самым текст сдвигается вниз на высоту «шапки».

Фиксированная «шапка»

Рис. 1. Фиксированная «шапка»

fixed подобно absolute также может использоваться для вывода диалоговых окон и сообщений, но при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте. В примере 2 для вывода блока в центре веб-страницы мы позиционируем его с помощью свойств left и top со значением 50%. При этом ровно по центру окажется левый верхний угол, поэтому весь блок смещаем влево и вверх на половину его ширины и высоты с помощью свойства transform. Размеры блока вычисляются автоматически и равны размеру содержимому плюс значения padding.

Пример 2. Фиксированный блок

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Сообщение</title> <style> .msg { position: fixed; /* Фиксированное позиционирование */ padding: 10px; /* Поля вокруг текста */ background: #009d4b; /* Цвет фона */ color: #fff; /* Цвет текста */ left: 50%; top: 50%; /* Выводим в центре */ transform: translate(-50%, -50%); /* Смещаем влево и вверх */ } body { min-height: 1000px; /* Минимальная высота */ } </style> </head> <body> <div class="msg">Всё в порядке, сайт удалён!</div> </body> </html>

Результат данного примера показан на рис. 2.

Сообщение в центре веб-страницы

Рис. 2. Сообщение в центре веб-страницы

Создайте веб-страницу, как показано на рис. 1, в которой меню закреплено на одном месте и не сдвигается с прокруткой документа.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Меню</title> <style> body { min-height: 1000px; } .menu { background: #edf6ff; width: 140px; padding: 10px; margin: 0; list-style: none; position: fixed; right: 10px; top: 100px; } .menu a { color: #1b4268; } </style> </head> <body> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> </ul> </body> </html>

Создайте веб-страницу, как показано на рис. 1, в которой подвал закреплён на одном месте и не сдвигается с прокруткой документа.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подвал</title> <style> body { min-height: 1000px; } footer { position: fixed; left: 0; bottom: 0; width: 100%; box-sizing: border-box; background: #282a30; color: #fff; padding: 10px; border-top: 3px solid #3db5d8; } </style> </head> <body> <footer> Copyright 2017 </footer> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.06.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты