PrepBro
← Назад к вопросам

Как работает свойство position со значением fixed?

1.0 Junior🔥 132 комментариев
#HTML и CSS

Комментарии (2)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое position: fixed

position: fixed - это CSS свойство, которое позиционирует элемент относительно viewport'а (видимую часть браузера), а не относительно его родителя или документа.

Когда элемент имеет position: fixed:

  • Он выводится из обычного потока документа (не занимает место)
  • Он остаётся на месте при прокрутке страницы
  • Его позиция определяется свойствами top, right, bottom, left
  • Он всегда видим (если не скрыт другими элементами)

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  z-index: 100; /* Чтобы был выше других элементов */
}

Это создаст шапку, которая остаётся в верхней части экрана при прокрутке.

Различие между position значениями

position: static    - обычный поток (по умолчанию)
position: relative  - относительно своей нормальной позиции
position: absolute  - относительно ближайшего positioned родителя
position: fixed     - относительно viewport (видимой части экрана)
position: sticky    - комбинация relative и fixed

Практический пример: Fixed Header

Самый частый кейс - зафиксированная шапка сайта:

<!DOCTYPE html>
<html>
<head>
<style>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333;
    color: white;
    padding: 10px;
    z-index: 1000;
  }
  
  body {
    margin-top: 80px; /* Компенсируем высоту header */
  }
  
  .content {
    padding: 20px;
  }
</style>
</head>
<body>
  <div class="header">
    <h1>Мой сайт</h1>
  </div>
  
  <div class="content">
    <p>Контент страницы...</p>
    <!-- Много текста для прокрутки -->
  </div>
</body>
</html>

При прокрутке страницы header остаётся на месте.

Fixed элементы и координаты

Позиция fixed элемента определяется четырьмя свойствами:

.modal {
  position: fixed;
  top: 100px;        /* 100px от верха viewport */
  right: 20px;       /* 20px от правого края viewport */
  width: 300px;
  height: 200px;
  background: white;
}

Это поместит элемент на 100px ниже верхнего края экрана, и на 20px от правого края.

Центрирование fixed элемента

Частая задача - выцентрировать модальное окно:

/* Способ 1: Transform */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid #ccc;
  z-index: 1000;
}

/* Способ 2: Flexbox на контейнере */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  width: 400px;
  height: 300px;
  background: white;
  border-radius: 8px;
}

Fixed vs Sticky

Частое смешение - в чём разница:

/* Fixed - всегда у viewport */
.header-fixed {
  position: fixed;
  top: 0;
}

/* Sticky - липнет при прокрутке, но может уйти */
.header-sticky {
  position: sticky;
  top: 0;
}

Пример:

<header style="position: sticky; top: 0; background: blue;">
  Заголовок
</header>
<section style="height: 800px;">
  Контент - header прилипнет в top
</section>
<footer>
  Подвал - header уйдёт вверх, footer займет место
</footer>

Проблемы и решения

Проблема 1: Fixed элемент с максимальной высотой

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh; /* Весь viewport */
  overflow-y: auto; /* Прокрутка внутри sidebar */
  z-index: 100;
}

**Проблема 2: Fixed с z-index

Большое значение z-index нужно для того, чтобы fixed элемент был выше других:

.header {
  position: fixed;
  z-index: 1000; /* Высокое значение */
}

.dropdown {
  z-index: 999; /* Меньше чем header */
}

.modal {
  z-index: 2000; /* Выше всего */
}

**Проблема 3: Fixed не работает в скроллируемом родителе

Если parent имеет transform, position, filter - fixed не будет relative viewport:

/* Это сломает fixed */
.parent {
  transform: translateX(0);
}

.child {
  position: fixed; /* Будет относительно parent */
}

React пример: Fixed компонент

import React from 'react';
import './Header.css';

export function Header() {
  return (
    <header className="header">
      <nav>
        <ul>
          <li><a href="/">Главная</a></li>
          <li><a href="/about">О нас</a></li>
          <li><a href="/contact">Контакты</a></li>
        </ul>
      </nav>
    </header>
  );
}

// CSS
// .header {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 60px;
//   background: white;
//   border-bottom: 1px solid #eee;
//   z-index: 1000;
// }
//
// body {
//   padding-top: 60px; /* Место для header */
// }

Когда использовать position: fixed

  • Навигационная шапка (header)
  • Боковое меню (sidebar)
  • Плавающие кнопки действия (FAB)
  • Модальные окна и диалоги
  • Tooltip'ы и popover'ы
  • Уведомления (toast, snackbar)
  • Зафиксированная подвал (footer)

Производительность

Fixed элементы создают новый стекинг контекст (stacking context), что может влиять на производительность:

/* Оптимально - minimal repaints */
.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Плохо - много animated элементов внутри */
.container {
  position: fixed;
  width: 100%;
  height: 100%;
}

.animated-content {
  animation: spin 2s infinite; /* Будет перерисовываться часто */
}

Запомни: position: fixed зафиксирует элемент относительно видимой части браузера (viewport), он останется на месте при прокрутке. Это мощный инструмент, но нужно помнить про z-index и родительские контексты стекирования.