CSS position: fixed — значение свойства

Свойство CSS position

position: fixedиспользуется в свойствах позиционирования CSS дляфиксированного позиционированиязначения. Элементы, использующие фиксированное позиционирование, будутвыведены из потока документа, относительноокна просмотра браузера(окно просмотра) для позиционирования,и не будет двигаться при прокрутке страницы。

Это основная технология для реализации фиксированных панелей навигации, кнопок возврата наверх, рекламы в боковой панели и других функций.

Определения слов：fixedИз латыниfixare, означающее «фиксированный, установленный», указывающее, что как только положение элемента определено, оно не изменится.

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

position: fixedНеобходимо использовать вместе сtop、right、bottom、leftсвойство для указания положения относительно окна просмотра.

/* 语法 */
position: fixed;

/* 常用组合：固定在顶部 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

/* 固定在右下角 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Основные возможности

Особенность 1: позиционирование относительно окна просмотра

Элементы с фиксированным позиционированиемНе зависят от родительских элементов, всегда позиционируются относительно видимой области окна браузера.

Особенность 2: вне потока документа

иabsoluteАналогично,fixedэлементНе занимает пространство документа, окружающие элементы будут располагаться нормально,Игнорироватьигнорируя существование элемента с фиксированным позиционированием.

Особенность 3: фиксированный, не перемещается при прокрутке

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

Особенность 4: активирует z-index

Активируется фиксированное позиционированиеz-indexСвойство может управлять порядком наложения элементов в области просмотра.

Пример

Давайте глубже разберёмся на примерахposition: fixedХарактеристики.

Пример 1: Фиксированная верхняя навигационная панель

ЭтоfixedСамый распространённый сценарий применения: фиксированная навигационная панель.

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

/* Фиксированная навигационная панель сверху */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
z-index: 1000;
}

/* Область основного содержимого */
.content {
padding-top: 80px; /* Чтобы не перекрывалась панелью навигации */
padding: 80px 20px 20px;
max-width: 800px;
margin: 0 auto;
}

.spacer {
height: 1500px; /* Создать длинную область прокрутки */
}

.text-block {
margin-bottom: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="navbar">
Фиксированная навигационная панель — прокрутите вниз, чтобы увидеть эффект
</div>
<div class="content">
<h1>Пример фиксированного позиционирования</h1>
<p>Это фиксированная навигационная панель, реализованная с помощью position: fixed.</p>
<p>Как бы вы ни прокручивали страницу, навигационная панель остаётся в верхней части страницы.</p>
<div class="text-block">
<h2>Область содержимого 1</h2>
<p>Это первый абзац содержимого, используемый для заполнения страницы, чтобы создать полосу прокрутки.</p>
</div>
<div class="text-block">
<h2>Область содержимого 2</h2>
<p>Это второй абзац содержимого.</p>
</div>
<div class="text-block">
<h2>Область содержимого 3</h2>
<p>Это третий абзац содержимого.</p>
</div>
<div class="text-block">
<h2>Область содержимого 4</h2>
<p>Это содержимое области 4.</p>
</div>
<div class="spacer"></div>
</div>
</body>
</html>

Пример 2: Кнопка возврата наверх, закреплённая в правом нижнем углу

Фиксированное позиционирование также часто используется для создания кнопок «наверх»:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}

/* Страница достаточно длинная, чтобы появилась полоса прокрутки */
.tall-content {
height: 2000px;
}

/* Кнопка, закреплённая в правом нижнем углу */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
}

.back-to-top:hover {
transform: scale(1.1);
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="content">
<h1>Пример кнопки «Наверх»</h1>
<p>Прокрутите страницу, чтобы увидеть эффект фиксированной кнопки.</p>
<div class="tall-content"></div>
</div>

<div class="back-to-top" title="Наверх">
↑
</div>
</body>
</html>

Пример 3: Фиксированная боковая панель

С помощью фиксированного позиционирования также можно реализовать фиксированную боковую панель:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

/* Основной контейнер: используем grid-раскладку */
.container {
display: grid;
grid-template-columns: 1fr 200px;
max-width: 1000px;
margin: 0 auto;
min-height: 2000px;
}

.main-content {
padding: 20px;
background-color: #ecf0f1;
}

/* Фиксированная боковая панель */
.sidebar {
position: fixed;
top: 20px;
right: calc(50% - 500px + 220px);
width: 180px;
background-color: #3498db;
color: white;
padding: 15px;
border-radius: 4px;
}

.ad-banner {
background-color: #e74c3c;
padding: 10px;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
}

.content-block {
background-color: white;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="main-content">
<h1>Область основного содержимого</h1>
<p>Это основное содержимое, которое перемещается вместе с полосой прокрутки.</p>
<div class="content-block">
<p>Абзац контента 1 — Заполните страницу, чтобы создать эффект прокрутки.</p>
</div>
<div class="content-block">
<p>Абзац контента 2</p>
</div>
<div class="content-block">
<p>Абзац контента 3</p>
</div>
<div class="content-block">
<p>Абзац контента 4</p>
</div>
<div class="content-block">
<p>Абзац контента 5</p>
</div>
<div class="content-block">
<p>Абзац контента 6</p>
</div>
<div class="content-block">
<p>Абзац контента 7</p>
</div>
<div class="content-block">
<p>Абзац контента 8</p>
</div>
</div>

<div class="sidebar">
<div class="ad-banner">Место для рекламы</div>
<p>Фиксированная боковая панель</p>
<p>Как бы ни прокручивался основной контент, я всегда остаюсь зафиксированным справа.</p>
</div>
</div>
</body>
</html>

Пример 4: Футер зафиксирован внизу

Иногда нужно зафиксировать футер внизу на страницах с небольшим количеством контента:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: Arial, sans-serif;
}

.content {
flex: 1;
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
width: 100%;
}

/* Футер зафиксирован внизу */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #2c3e50;
color: white;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<div class="content">
<h1>Страница с небольшим количеством контента</h1>
<p>На этой странице очень мало контента, но футер всё равно зафиксирован внизу.</p>
<p>Реализовано с использованием flex: 1 во flexbox в сочетании с position: fixed.</p>
</div>

<div class="footer">
©2026 ПРИМЕР - Фиксированный футер
</div>
</body>
</html>

Пример 5: Фиксированный слой оверлея

Фиксированное позиционирование также можно использовать для создания полноэкранных оверлеев:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}

.open-btn {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

/* Фиксированный слой оверлея */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}

/* Скрыть оверлей */
.modal-overlay.hidden {
display: none;
}

/* Содержимое всплывающего окна */
.modal-content {
background-color: white;
padding: 30px;
border-radius: 8px;
text-align: center;
max-width: 400px;
}

.modal-content h2 {
margin-bottom: 15px;
}

.close-btn {
margin-top: 20px;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Пример фиксированного оверлея</h1>
<p>Нажмите кнопку, чтобы открыть всплывающее окно.</p>

<button class="open-btn" onclick="document.querySelector('.modal-overlay').classList.remove('hidden')">
Открыть всплывающее окно
</button>

<div class="modal-overlay hidden">
<div class="modal-content">
<h2>Добро пожаловать в EXAMPLE</h2>
<p>Это всплывающее окно-оверлей, созданное с использованием фиксированного позиционирования.</p>
<p>Оверлей всегда покрывает всю область просмотра и не прокручивается вместе со страницей.</p>
<button class="close-btn" onclick="document.querySelector('.modal-overlay').classList.add('hidden')">
Close
</button>
</div>
</div>
</body>
</html>

Примечания

Проблемы совместимости с мобильными устройствами:В iOS Safari и некоторых мобильных браузерах,position: fixedмогут возникать проблемы совместимости. Элемент может смещаться, когда поле ввода получает фокус. Возможные решения включают: использование-webkit-position: fixedили установитьtransform: translateZ(0)чтобы включить аппаратное ускорение.

уровень z-index

элемента с фиксированным позиционированиемz-indexрассчитывается относительнообласти просмотра, а не относительно родительского элемента.

Отличие от абсолютного позиционирования

Особенности	position: absolute	position: fixed
точка отсчёта позиционирования	ближайший позиционированный элемент-предок	Область просмотра браузера
прокрутка страницы	Перемещается при прокрутке страницы	зафиксировано и не перемещается
print	обычное отображение	может не отображаться или работать неправильно

Запретить печать элементов с фиксированным позиционированием

@media print {
    .fixed-element {
        position: static;  /* 打印时取消固定定位 */
    }
}

Типичные сценарии применения

Сценарий 1: Фиксированная верхняя навигация

.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
}

Сценарий 2: Фиксированная кнопка «назад»

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Сценарий 3: Окно чата

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
}

Итог

position: fixed— это ключевая технология для реализации фиксированных элементов интерфейса:

относительноокна просмотра браузерапозиционирование, на которое не влияет родительский элемент
Фиксированный, не перемещается при прокрутке страницыПеремещается
элементвыведен из потока документа, не занимает места
активироватьz-index, позволяет управлять порядком наложения
Обычно используется для фиксированных панелей навигации, кнопок «наверх», фиксированных боковых панелей и модальных оверлеев
Обратите внимание на проблемы совместимости на мобильных устройствах

Свойство CSS position

Другие расширения

CSS3 Учебник

CSS адаптивный дизайн

CSS справочное руководство

CSS position: fixed — значение свойства

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

Основные возможности

Особенность 1: позиционирование относительно окна просмотра

Особенность 2: вне потока документа

Особенность 3: фиксированный, не перемещается при прокрутке

Особенность 4: активирует z-index

Пример

Пример 1: Фиксированная верхняя навигационная панель

Пример

Пример 2: Кнопка возврата наверх, закреплённая в правом нижнем углу

Пример

Пример 3: Фиксированная боковая панель

Пример

Пример 4: Футер зафиксирован внизу

Пример

Пример 5: Фиксированный слой оверлея

Пример

Примечания

уровень z-index

Отличие от абсолютного позиционирования

Запретить печать элементов с фиксированным позиционированием

Типичные сценарии применения

Сценарий 1: Фиксированная верхняя навигация

Сценарий 2: Фиксированная кнопка «назад»

Сценарий 3: Окно чата

Итог