Фиксированный блок в css
Фиксированные блоки используется на сайте для того контента, который должен быть всегда виден на экране.
Основные примеры использования:
- Кнопка "Наверха"
- Верхнее меню при прокрутке страницы
- Сайдбары
- Различные рекламные баннеры
Создание фиксированного блока
Для создания таких блоков, мы будем использовать свойство "position fixed".
Создадим простую разметку блока:
<h3>Фиксированый блок</h3>Текст фиксированного блока на CSS
И добавим следующие стили:
#fixblock{ width: 300px; height: 100px; border: 1px solid #000; position: fixed; bottom: 0px; right: 0px; }
Для работы фиксированного блока важно указать:
- position: fixed - Фиксированное позиционирование
- bottom - Положение по вертикали (или top)
- right - Положение по горизонтали (или left)
Примеры использования
Рассмотрим стили для конкретных примеров:
Верхнее меню
#topmenu{ width: 100%; position: fixed; top: 0px; }
Так как мы указали ширину в 100%, положение по горизонтали не обязательно.
Кнопка "Наверх"
#ToUp{ width: 50px; height: 50px; position: fixed; right: 10px; bottom: 10px; }
Правый сайдбар во всю высоту
#rightsidebar{ width: 300px; height: 100%; position: fixed; right: 0px; top: 0px; }
Оставить комментарий