Общие правила работы с z-index

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

При работе с z-index необходимо придерживаться ряду правил:

  1. Если заранее известен приоритет наложения областей друг на друга, то на этих областях задается соответствующий z-index, изолирующий контекст наложения.
  2. Если между двумя областями, в зависимости от содержимого, может происходить наложение контента, то команды разработчиков должны договориться между собой о приоритете областей.
    Под прикладные нужды выделен диапазон z-index’ов от 1 до 15, а все платформенные решения будут находиться в диапазоне от 16 до 30 для статического контента.
  3. Контент по наведению может быть выше статического контента, поэтому под эту реализацию выделяется диапазон от 31 до 40 (плитка).
  4. Над контентом, обозначенным в пункте 3, должен быть контент, с которым пользователь в текущий момент осуществляет Drag-n-Drop. Под эти нужды выделяется диапазон от 41 до 50.

Данные диапазоны действуют внутри изолированных областей, т.е. допустимый вариант использования:

<zIndex=1>
   <zIndex=1></zIndex=1>
   <zIndex=2></zIndex=2>
</zIndex=1>
<zIndex=2>
   <zIndex=1></zIndex=1>
   <zIndex=2></zIndex=2>
</zIndex=2>