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

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 58 из 76.

В CSS фиксированное позиционирование удерживает элемент в одном и том же месте на экране, независимо от того, насколько сильно вы прокручиваете страницу. Когда вы устанавливаете position: fixed;, элемент удаляется из нормального потока документа, поэтому другие элементы его игнорируют. Он остается зафиксированным относительно окна браузера, что делает его полезным для шапок, подвалов или меню, которые всегда должны быть на виду.

Вот базовый синтаксис для использования фиксированного позиционирования:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Это объявление устанавливает схему позиционирования элемента как фиксированную.

top, right, bottom, left: Эти свойства определяют положение элемента относительно области просмотра (viewport). Вы можете использовать положительные или отрицательные значения, указанные в пикселях (px), ems (em), процентах (%) или других допустимых единицах измерения CSS.

Например:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

В этом примере элемент с классом header зафиксирован в верхней части области просмотра с помощью position: fixed;, top: 0; и left: 0;.

Задание

Легко

Вам дан HTML-документ с заголовком (<div>) и абзацем (<p>). Ваша задача — использовать фиксированное позиционирование, чтобы заголовок оставался в верхней части области просмотра даже при прокрутке страницы. Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом header.
Установите свойство position элемента .header в значение fixed.
Установите свойство top элемента .header в 0, а свойство left — в 0. Это расположит заголовок в верхнем левом углу области просмотра.
Установите свойство width элемента .header в 100%, чтобы он растягивался на всю ширину области просмотра.
Установите свойство background-color элемента .header в #fcc726 (золотисто-желтый), чтобы он был заметен на фоне содержимого страницы.
Установите свойство text-align в значение center, чтобы это выглядело лучше.

Шпаргалка

Фиксированное позиционирование удерживает элемент в одном и том же месте на экране независимо от прокрутки. Элемент удаляется из нормального потока компоновки.

Базовый синтаксис:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Пример — фиксация элемента в верхнем левом углу области просмотра:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Свойства позиционирования (top, right, bottom, left) определяют положение элемента относительно области просмотра и принимают значения в пикселях, em, процентах или других единицах CSS.

Попробуйте сами

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>