Как заставить элемент выйти на передний план?

Как заставить элемент выйти на передний план

В CSS существует несколько способов контролировать порядок наложения элементов. Главное свойство для этого — z-index, которое определяет, какой элемент находится выше других.

Z-index свойство

Z-index работает только для позиционированных элементов (position: relative, absolute, fixed, sticky).

.element {
  position: relative;
  z-index: 10;
}

/* Более высокое значение — элемент выше */
.overlay {
  position: fixed;
  z-index: 9999;
}

.modal {
  position: fixed;
  z-index: 1000;
}

.background {
  position: relative;
  z-index: 1;
}

Пример с HTML и CSS

<!-- HTML -->
<div class="background">Фоновый слой</div>
<div class="card">Карточка</div>
<div class="modal">Модальное окно</div>

.background {
  position: relative;
  z-index: 1;
  background: lightgray;
}

.card {
  position: relative;
  z-index: 10;
  background: white;
  transform: translateY(-50px);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  position: relative;
  z-index: 101;
  background: white;
  padding: 2rem;
  border-radius: 8px;
}

Контекст наложения (Stacking Context)

Важно понимать, что z-index работает не глобально, а внутри контекста наложения. Каждый родитель со свойством position создаёт новый контекст, и дочерние элементы не могут выйти выше родителя.

<div class="parent-a" style="position: relative; z-index: 10;">
  <div class="child-a" style="position: relative; z-index: 9999;">
    Дочерний элемент A
  </div>
</div>

<div class="parent-b" style="position: relative; z-index: 5;">
  <div class="child-b" style="position: relative; z-index: 1;">
    Дочерний элемент B
  </div>
</div>

Здесь child-a будет выше parent-b и child-b, потому что parent-a имеет больший z-index.

Способы создания контекста наложения

/* Позиционирование */
.element {
  position: relative;
  z-index: 1;
}

/* Opacity меньше 1 */
.element {
  opacity: 0.99;
}

/* Transform свойства */
.element {
  transform: scale(1);
}

/* Filter свойства */
.element {
  filter: blur(0px);
}

/* Will-change */
.element {
  will-change: transform;
}

/* Flex/Grid контейнеры */
.container {
  display: flex;
}

.child {
  z-index: 10; /* Работает для flex-детей */
}

Практические примеры

Dropdown меню

.header {
  position: relative;
  z-index: 100;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200; /* Выше header */
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

Toast уведомление

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Максимально высоко */
  background: green;
  color: white;
  padding: 1rem;
  border-radius: 4px;
}

Sticky header с содержимым

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content {
  position: relative;
  z-index: 1;
}

Tailwind CSS

<!-- Использование классов z-index в Tailwind -->
<div class="relative z-10">Карточка</div>
<div class="fixed inset-0 z-50 bg-black/50">Модаль</div>
<div class="relative z-0">Фон</div>

<!-- Доступные значения по умолчанию -->
<!-- z-0, z-10, z-20, z-30, z-40, z-50 -->

<!-- Для больших значений используй скобки -->
<div class="z-[9999]">Toast</div>

Частые проблемы и решения

Z-index не работает

/* Неправильно — position не установлена */
.element {
  z-index: 9999;
}

/* Правильно */
.element {
  position: relative;
  z-index: 9999;
}

Элемент всё ещё позади

Проверь, есть ли родители с position и z-index. Дочерний элемент не может выйти выше своего позиционированного родителя.

Нежелательные контексты наложения

/* Такие свойства создают контекст наложения неявно */
.element {
  opacity: 0.99;
  transform: translateZ(0);
  filter: brightness(1);
}

Заключение

Чтобы заставить элемент выйти на передний план, используй z-index вместе с position. Помни о контекстах наложения. Для модалей, тостов и дропдаунов используй высокие значения z-index (от 100 и выше). В Tailwind CSS это легко делается через классы z-10, z-50, z-[9999].