Як зафіксувати шар, щоб він залишався на одному місці при прокрутці сторінки?

Влад Мержевич

Тема:Верстка
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+6.0+1.0+1.0+2.3+5.0+

Задача

Закріпити положення блокового елемента, щоб він завжди залишався на одному місці при прокрутці сторінки.

Рішення

«Заморожування» елемента в певному місці веб-сторінки відбувається за допомогою CSS властивості 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>
 </body>
</html>

Результат даного прикладу показаний на малюнку 1. Зверніть увагу, що положення елемента не змінюється при прокрутці сторінки вниз.

Малюнок 1. Положення блоку з меню

ВерсткаПозиціонування

Часті запитання