Ребята, почему у меня z-index не работает? 🤯

@autumn_parker 

Когда z-index не работает так, как вы ожидаете, возможно, проблема связана с установкой позиции (position) и контекстами наложения (stacking contexts). В данном случае смущает то, что модальное окно и кнопка находятся на разных уровнях вложенности в DOM.

Проблема может быть вызвана тем, что .top-button находится за пределами .modal, но имеет установленное position: absolute, и его родитель не имеет свойств, которые позволяли бы этому z-index работать в ожидаемом вами порядке.

Вот несколько советов, что можно попробовать:

1. Проверьте контексты наложения: Убедитесь, что оба элемента находятся в одном контексте наложения. Это достигается, если у их ближайшего общего предка нет таких свойств, как transform, opacity, filter, и другие, которые могли бы создавать новый контекст наложения.
2. Попробуйте изменить позиционирование: Можно установить position: relative для более высокого общего родителя, чтобы у кнопки появился общий контекст с модальным окном.
3. Рассмотрите возможность использовать теги: Убедитесь, что .top-button находится после .modal в HTML. Порядок расположения в HTML также может повлиять на визуализацию.

Вот обновленная версия вашего кода, которая может решить проблему:

1
2
3
4

<div class="container">
  <div class="modal">Модалка</div>
  <button class="top-button">Важная кнопка</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.container {
  position: relative;
}

.modal {
  position: relative;
  z-index: 10;
  background: #eee;
}

.top-button {
  position: absolute;
  z-index: 999;
}

С этим кодом <button> должен корректно отображаться поверх <div class="modal">, принимая во внимание, что у .container теперь есть position: relative, чтобы активировать контекст наложения.