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

Последнее обновление: 28.04.2016

Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.

Создадим к примеру фиксированную панель навигации:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Позиционирование в HTML5</title>
		<style>
			body{ 
				margin:0;
				padding:0;
			}
			.toolbar{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background-color: #222;
				border-bottom: 1px solid #ccc;
			}
			.toolbar a{
				color: #eee;
				display: inline-block;
				padding: 10px;
				text-decoration: none;
				font-family: Verdana;
			}
			.content{
				margin-top: 50px;
				padding: 10px;
			}
		</style>
    </head>
    <body>
		<div class="toolbar">
			<a href="#">Главная</a>
			<a href="#">Блог</a>
			<a href="#">Контакты</a>
			<a href="#">О сайте</a>
		</div>
		<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
			Lorem Ipsum has been the industry....</div>
	</body>
</html>
Фиксированный блок в HTML и CSS

Чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:

top: 0;
left: 0;
right: 0;

Для нижележащего блока с основным содержанием фиксированный элемент фактически не существует разметке, так как блок с фиксированным, как и с абсолютным позиционированием не учавствуют в стандартном потоке html. Поэтому по умолчанию оба блока будут накладываться друг на друга и размещатьс в одной точке. И нам надо должным образом разместить блок содержимого относительно фиксированного блока, например, установив нужный отступ:

margin-top: 50px;

Фактически отступ идет от границ области просмотра браузера, поэтому высота отступа должна быть больше высоты фиксированного элемента.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850