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

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

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

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

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

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

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

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

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

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

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus