пишет:
Здравствуйте! Продолжаем тему Позиционирование в CSS и сегодня рассмотрим фиксированное позиционирование. Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.
Для фиксированного позиционирования у элементов нужно установить значение 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>
Читать далее
Это интересно
+2
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20251113021229