Урок Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?

TaLLeR43

Администраторы
81
0
26

Задача​

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

Решение​

«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed. При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left, right, top и bottom, которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).

Пример 1. Использование position
HTML:
<!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. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
ocr (1).jpeg
 
Яндекс.Метрика
Сверху