Контекст наложения

Если с помощью z-index изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.

Свойства, создающие контекст{{ excerpt_separator }}: — opacity со значением меньше 1, — transform, — perspective, — filter.

В качестве подопытного кролика возьмем такую конструкцию:

По умолчанию голубой элемент накладывается на красный, но я задала красному элементу z-index: 10;, чтобы видеть действие свойств, создающих контекст.

Теперь зададим родителю первого элемента одно из вышеперечисленных свойств, например: opacity: .99:

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

Здесь видно, что красный элемент перекрывает зеленый, потому что у красного задан высокий z-index, при этом весь левый элемент перекрывается правым, несмотря на высокое значение z-index у красного элемента:

Можно попробовать это обойти, добавив z-index самому родителю, но в этом случае родительский элемент будет перекрывать всё содержимое второго элемента, что не всегда может быть нужно:

Кроме того, частое использование z-index может затруднить дальнейшую отладку и поддержку кода.