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

Что такое z-index и стеклование

В веб-разработке элементы отображаются в трёхмерном пространстве: на оси Z. По умолчанию элементы, которые идут позже в HTML-коде, находятся впереди. Свойство z-index позволяет контролировать порядок расположения элементов по глубине.

Z-index — основной метод

Свойство z-index определяет, какой элемент находится впереди, а какой сзади. Меньшее значение = дальше (задний план), большее значение = ближе (передний план).

.modal {
  position: relative; /* или absolute, fixed */
  z-index: 1000;
}

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

Отрицательные значения отправляют элемент ещё дальше назад.

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

Модальное окно с фоном

<div class="overlay"></div>
<div class="modal">
  <h1>Форма входа</h1>
</div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100; /* фон позади модали */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  z-index: 101; /* модаль впереди фона */
}

Випадающее меню

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="dropdown">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="dropdown-trigger"
      >
        Меню
      </button>
      {isOpen && (
        <div className="dropdown-menu">
          <a href="/profile">Профиль</a>
          <a href="/settings">Настройки</a>
          <a href="/logout">Выход</a>
        </div>
      )}
    </div>
  );
}

.dropdown {
  position: relative;
}

.dropdown-trigger {
  position: relative;
  z-index: 10;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 9; /* позади кнопки, но впереди остального контента */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Прилипающий 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;
}

Отправка элемента на задний план (отрицательное значение)

.watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 4rem;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1; /* Позади всех элементов */
  pointer-events: none;
}

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

Важно понимать, что z-index работает внутри контекста стеклования. Элемент с z-index: 9999 внутри контейнера с z-index: 1 будет позади элемента с z-index: 2 в другом контейнере!

<div class="container-a">
  <div class="child-a">z-index: 9999</div>
</div>
<div class="container-b">
  <div class="child-b">z-index: 1</div>
</div>

.container-a {
  position: relative;
  z-index: 1; /* Контекст стеклования */
}

.container-b {
  position: relative;
  z-index: 2; /* Этот контейнер впереди, поэтому его дети впереди */
}

.child-a {
  position: relative;
  z-index: 9999; /* Не спасёт! */
}

.child-b {
  position: relative;
  z-index: 1;
}

Все способы отправить элемент на задний план

1. Отрицательный z-index

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

2. Порядок в HTML

<!-- Элемент, идущий раньше, находится сзади (по умолчанию) -->
<div class="background"></div>
<div class="foreground"></div>

3. CSS order в Flexbox

.container {
  display: flex;
}

.background {
  order: 1; /* Ранее в порядке отображения */
}

.foreground {
  order: 2; /* Позже в порядке отображения */
}

4. CSS grid-row и grid-column

.grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.background {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  z-index: -1;
}

5. opacity и visibility

Похоже отправляет элемент на задний план, но он остаётся интерактивным:

.dim {
  opacity: 0.3; /* Прозрачнее = кажется дальше */
}

Лучшие практики

Используй стратегию с шагами z-index

const zIndex = {
  BACKGROUND: 0,
  DROPDOWN: 10,
  MODAL: 100,
  NOTIFICATION: 200,
  TOOLTIP: 300
};

.dropdown-menu { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }

Избегай вложенных позиционированных элементов

// ❌ Плохо
function ModalWithDropdown() {
  return (
    <div style={{position: 'relative'}}>
      <Modal style={{position: 'relative', zIndex: 100}} />
    </div>
  );
}

// ✅ Хорошо - используй Portal
import { createPortal } from 'react-dom';

function Modal() {
  return createPortal(
    <div className="modal">...</div>,
    document.body
  );
}

Выводы

Задний план можно отправить несколькими способами: отрицательный z-index, порядок в HTML, CSS Flexbox order, grid, opacity. Но главное помнить про контекст стеклования: z-index работает только внутри одного контекста. Для сложных структур используй Portal в React, чтобы избежать проблем с z-index. Всегда планируй стратегию z-index с шагами (0, 10, 100, 200) для избежания конфликтов.