Фиксированный блок в 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;
}