Таким же образом, как свойство background-attachment: fixed (фиксированное расположение фона) действует на фоновые изображения, position: fixed (фиксированное расположение) действует на элементы: оно позволяет элементу закрепиться на своем положении относительно веб-страницы, в то время как остальное содержимое будет проматываться мимо него. Обычно это свойство применяется к содержащим элементам, наиболее часто к шапкам и подвалам. Как и в случае с элементами с абсолютным расположением, обычное содержимое со статическим расположением будет проматываться под содержимым с фиксированным расположением. Один из примеров — выезжающая вкладка сбоку страницы, которая скрывает содержимое, пока оно не нужно.

Рассмотрим подробнее расположение этой вкладки, оно очень простое.
Используется следующая разметка:

<div id="fixed-pull-tab">
	<img src="http://thenewcode.com/assets/images/levis-red-tab.png" style="float: right" alt="LEVI’S">
	<p>Это пример элемента со свойством <code>position: fixed;</code>
примененным к нему, чтобы показать, как действует фиксированное расположение.</div>

Вот связанный с разметкой код CSS: использовано свойство тени блока, чтобы подчеркнуть то, что слой блока с фиксированным расположением находится выше:

div#fixed-pull-tab {
        width: 300px;
        border: 1px solid #000;
        padding-left: 1em;
        background-color: rgba(255, 255, 37, 0.7);
        position: fixed;
        left: -265px;
        top: 200px;
}
div#fixed-pull-tab p {
        margin-right: 70px;
}
div#fixed-pull-tab img {
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.33);
}
div#fixed-pull-tab:hover {
        left: 0;
}

Как и в случае со свойством абсолютного расположения, свойство фиксированного расположения нужно использовать осторожно: с его помощью очень легко создать функции веб-страницы, которые перекрывают и загораживают содержимое.

Особенности фиксированного элемента или элементов, расположенных внутри блока

При нормальных условиях элемент с фиксированным расположением изымается из содержимого, и все данные о его расположении позиционируют его относительно тега, не зависимо ни от чего.

Хотя можно поместить элемент с фиксированным расположением внутрь и относительно другого элемента, если этот родительский элемент использует трансформации. Так что при использовании следующей разметки:

<div id="container">
        <div id="fixed"></div>
</div>

Внутренний элемент может быть зафиксирован в родительском элементе с помощью кода CSS ниже, который для наглядности приведен без приставок производителей:

#container {
        transform: translateZ(0);
}
#fixed {
        position: fixed;
}

Эта особенность является частью спецификации CSS и поддерживается большинством современных версий браузеров, кроме Internet Explorer версии 11. Eric Meyer обнаружил ее одним из первых. Вероятно, она так и будет очень редко использоваться, так как большинство веб-разработчиков предпочитает намного более распространенный и широко известный способ, использующий абсолютное расположение в блоке с относительным расположением, но об этом все равно стоит знать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование расположений CSS: недооцененное значение «относительное»
• Использование расположений CSS: значение по умолчанию «статическое»
• Использование значения по умолчанию CSS для сброса настроек