MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

z-index

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Введение

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

Для позиционируемого контейнера свойство z-index определяет:

  1. порядок наложения в текущем контексте контексте наложения;
  2. создаёт ли контейнер локальный контекст наложения.

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Анимируемостьда, как целое число
Канонический порядокуникальный не однозначный порядок, определённый формальной грамматикой
Создаёт контекст наложенияда

Синтаксис

/* Значение - ключевое слово */
z-index: auto;

/* <целочисленные> значения */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Отрицательные значения понижают приоритет */

/* Глобальные значения */
z-index: inherit;
z-index: initial;
z-index: unset;

Значения

auto
Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.
<integer>
Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен 0. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.

Формальный синтаксис

auto | <integer>

Примеры

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Результат

Спецфикации

Спецификация Статус Комментарий
CSS Transitions
Определение 'animation behavior for z-index' в этой спецификации.
Рабочий черновик Определяет свойство z-index как анимируемое.
CSS Level 2 (Revision 1)
Определение 'z-index' в этой спецификации.
Рекомендация Первоначальное определение

Совместимость с браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Основная поддержка 1.0 1.0 (1.7 или ранее) 4.0 4.0 1.0
Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) 1.0 3.0 (1.9) 4.0 4.0 1.0
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Основная поддержка ? ? ? ? ?
Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) ? ? ? ? ?

Смотрите также

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: yaruson
 Обновлялась последний раз: yaruson,