Как заставить элемент всегда быть выше остальных?

Как сделать элемент всегда выше остальных

Для управления наслоением элементов в CSS используется свойство z-index. Это один из самых важных инструментов для управления порядком отображения элементов на странице.

Основное свойство: z-index

Значение z-index определяет порядок наслоения элементов вдоль оси Z (в глубину экрана). Большее значение = выше слой:

// CSS подход
const styles = `
  .modal {
    position: fixed;
    z-index: 9999; /* Очень большое значение */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .tooltip {
    position: absolute;
    z-index: 100; /* Меньше, чем modal */
  }

  .dropdown {
    position: relative;
    z-index: 10; /* Еще меньше */
  }
`;

Важное условие: Контекст стекирования

З-index работает ТОЛЬКО если элемент имеет position, отличный от static:

// НЕПРАВИЛЬНО - z-index не будет работать
const broken = {
  position: 'static', // Default значение
  zIndex: 9999 // Будет проигнорирован
};

// ПРАВИЛЬНО
const correct = {
  position: 'relative', // или 'absolute', 'fixed', 'sticky'
  zIndex: 9999 // Теперь работает
};

Стратегия управления z-index

Для больших проектов создайте систему слоев:

// lib/zIndex.ts
export const zIndex = {
  dropdown: 100,
  sticky: 50,
  default: 0,
  modal: 1000,
  tooltip: 1100,
  notification: 1200,
  loading: 2000
};

// Использование
const ModalStyles = {
  position: 'fixed',
  zIndex: zIndex.modal,
  backgroundColor: 'rgba(0, 0, 0, 0.5)'
};

const TooltipStyles = {
  position: 'absolute',
  zIndex: zIndex.tooltip,
  backgroundColor: 'white'
};

В React/Tailwind

Tailwind имеет встроенные классы для z-index:

function Modal() {
  return (
    <div className="fixed inset-0 z-50 bg-black/50">
      <div className="bg-white rounded-lg p-6">
        <h2>Modal Window</h2>
      </div>
    </div>
  );
}

function Dropdown() {
  return (
    <div className="relative">
      <button>Open Menu</button>
      <ul className="absolute top-full left-0 z-40 bg-white shadow">
        <li>Option 1</li>
        <li>Option 2</li>
      </ul>
    </div>
  );
}

// Доступные классы в Tailwind
// z-0, z-10, z-20, z-30, z-40, z-50
// z-auto, z-inherit, z-static

Контекст стекирования и дочерние элементы

Это частая ошибка - дочерний элемент НЕ может быть выше контекста стекирования родителя:

// НЕПРАВИЛЬНО - tooltip не будет выше modal
const Modal = () => (
  <div style={{ position: 'fixed', zIndex: 1000 }}>
    <Tooltip zIndex={9999} /> {/* Не поможет! */}
  </div>
);

// ПРАВИЛЬНО - tooltip должен быть вне modal
const App = () => (
  <>
    <Modal zIndex={1000} />
    <Tooltip zIndex={1100} /> {/* Вне modal */}
  </>
);

Особые случаи

1. Sticky элементы

Для header, который должен оставаться вверху при скролле:

function StickyHeader() {
  return (
    <header className="sticky top-0 z-40 bg-white shadow">
      <nav>Navigation</nav>
    </header>
  );
}

2. Backdrop для модальных окон

function Modal({ isOpen, onClose }) {
  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop - ниже модального окна */}
      <div
        className="fixed inset-0 z-40 bg-black/50"
        onClick={onClose}
      />
      {/* Modal - выше backdrop */}
      <div className="fixed inset-0 z-50 flex items-center justify-center">
        <div className="bg-white rounded-lg p-8 max-w-md">
          <h2>Modal Content</h2>
          <button onClick={onClose}>Close</button>
        </div>
      </div>
    </>
  );
}

3. Всплывающие уведомления

function Toast({ message }) {
  return (
    <div className="fixed bottom-4 right-4 z-50 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg">
      {message}
    </div>
  );
}

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

1. Избегайте очень большие значения - используйте систему слоев (100, 1000, 2000)
2. Документируйте иерархию - создайте файл с константами z-index
3. Используйте relative позиционирование - избегайте fixed для всего
4. Помните про контекст стекирования - дочерние элементы не могут быть выше родителя
5. Тестируйте на мобильных - убедитесь, что элементы видны на всех размерах
6. Минимизируйте глубину вложенности - сложные иерархии сложнее отлаживать

Правильное управление z-index - это ключ к чистому и предсказуемому отображению элементов на странице.