Все для создания и продвижения сайтов

Верстка, программирование, SEO

Фиксированный блок в css

количество просмотров
Фиксированный блок в 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;
}
Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.