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