| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 2.3+ | 5.0+ |
Завдання
Задати положення блокового елемента, щоб він завжди залишався на одному місці при прокручуванні сторінки.
Рішення
«Заморожування» елемента в певному місці веб-сторінки відбувається з допомогою стильового властивості position зі значенням fixed. При цьому положення елемента не змінюється навіть при прокручуванні сторінки за допомогою скролінга. Самі координати задаються через властивості left, right, top і bottom, які відповідно визначають положення від лівого, правого, верхнього і нижнього краю вікна браузера (приклад 1).
Приклад 1. Використання position
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Фіксоване меню</title>
<style>
.menu {
position: fixed; /* Фіксоване положення */
right: 10px; /* Відстань від правого краю вікна браузера */
top: 20%; /* Відстань зверху */
padding: 10px; /* Поля навколо тексту */
background: #ffe; /* Колір фону */
border: 1px solid #333; /* Параметри рамки */
}
.text {
height: 1000px;
}
</style>
</head>
<body>
<div class="menu">Меню</div>
<div class="text" ><div class="text" ></div>
</body>
</html>
Результат цього прикладу показано на рис. 1. Зверніть увагу, що положення елемента не змінюється при прокручуванні сторінки вниз.
Рис. 1. Положення блоку з меню