Описание

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index . Это свойство работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Синтаксис

z-index: число | auto | inherit

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index , на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index , но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Слой 1 наверху

Слой 4 наверху

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства z-index

Объектная модель

document.getElementById("elementID ").style.zIndex

Браузеры

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

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

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

Надо понимать, что данное правило работает только в отношении позиционированных тегов, для которых прописано свойство . То есть для стандартного потока документа (где позиционирование не задано или его параметр определен как static) оно действовать не будет. Ниже я продемонстрирую работу z-index на конкретном примере.

Как z-index определяет позиции элемента

Итак, для каждого элемента в CSS находится свое место на вебстранице в соответствии с прописанными для него стилями. Местоположение всех блоков относительно друг друга определяется с помощью системы координат.

В общем случае точка отсчета находится в левом верхнем углу области просмотра (окна браузера). При этом оси X и Y определяют местоположение элементов в плоскости экрана монитора. А вот ось Z, как вы, наверное, догадались, позволяет смоделировать уже пространственную систему координат.

Она расположена перпендикулярно плоскости, образованной X и Y, и направлена прямо на нас. Само собой разумеется, что точкой отсчета по оси Z является ноль. В нулевой точке расположены все статические элементы, для которых определено свойство position static (нормальное позиционирование).

По умолчанию, если position вовсе не прописан, то такая ситуация абсолютно равнозначна той, как если бы был указан параметр static. В этом случае отображение всех HTML элементов страницы происходит в стандартном потоке. Таким образом, position, как, например, и float (в о создании плавающих элементов в CSS информация) дает возможность изменять обычный вариант очередности для решения специальных задач верстки.

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

Основное правило гласит: вебэлемент, определяемый тегом, который расположен ниже в HTML коде страницы, будет находится ближе к нам. То есть он будет перекрывать сверху блок, код которого находится выше.

А вот явно позиционированные (динамические) элементы (со значениями relative, absolute, fixed) находятся выше всех статических. В отношениях между динамическими вэбэлементами будет действовать все тот же закон: тот, что расположен ниже в коде, находится ближе к нам (выше других).

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

Z-index: число|auto|inherit

Числовые значения могут быть какими угодно: как отрицательными, так и положительными, включая ноль . Параметр auto предопределяет автоматический порядок расположения вэбэлементов в соответствии с их очередностью в коде HTML, учитывая принадлежность к родителю. Значение inherit показывает, что z-index у родительских.

Теперь настало время направить наши изыскания в практическое русло, чтобы подтвердить теоретические выкладки. Я возьму для примера три относительно позиционированных (с указанным свойством position: relative). Для наглядности пропишу для каждого цветовой оттенок, рамку, а также укажу отступы слева (left) и сверху (top), ширину (width) и высоту (height):

На вебстранице после интерпретации HTML кода браузером эти три блока будут выглядеть так:

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

Картина изменится:

Как видим, получает преимущество красный контейнер и он теперь находится выше других. Далее попробуем добавить z-index уже зеленому блоку, но уже со значением 2:

Результат будет таким:

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

Z-index: auto |

z-index не работает с position: static; . Значения relative , absolute и fixed равнозначны

Пример: зелёный с z-index: 2; находится под красным z-index: 1; только когда имеет значение по умолчанию.

z-index: 2; static relative absolute fixed

z-index: 1; static relative absolute fixed

z-index: 2;

z-index: 1;

Если у соседних элементов одинаковое значение z-index , то нижние в коде теги показаны над верхними

[Пример интерактивный, следует переключать кнопки]

• красный:
• синий:
• зелёный:

У дочернего элемента родителя, имеющего z-index не auto и position , отличный от static , z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым

• красный:
• синий:
• зелёный:

Отрицательный z-index перемещает элемент перед background , border , box-shadow контекста наложения

Вложенные элементы отображаются над родителем. Единственный способ поместить дочерний тег ниже родителя — присвоить ему отрицательный z-index .

• контекст наложения:

Примеры использования:

z-index и opacity

Рассматриваются как z-index: 0; . Если дополнительно задать position не static и z-index не auto , то положение измениться в соответствии с последними свойствами CSS.

• красный:
• синий:
• зелёный:

1. Если можно не использовать z-index , то лучше его не использовать и, например, сразу в HTML коде разместить теги в требуемом порядке.
2. Если z-index всё же нужен, скажем, для выпадающего меню, то значений 0 , 1 , 2 , 3 , 4 , 5 вполне достаточно в большинстве случаев, не нужно переходить на десятки, а то и сотни.
3. Если z-index не работает, то нужно подняться вверх по дереву DOM, чтобы понять где контекст наложения.

Примечание: IE 6-7 рассматривает значение auto как 0 и всем position не static создаёт контекст наложения.

z-index

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

Но тут не все так просто. Это свойство является в CSS одним из тех немногих, которые осуществляют сразу две совершенно разные функции (как, например, position):

1. Свойство z-index служит для упорядочивания позиционированных элементов.
2. Каждый элемент с z-index не равным auto создает новый уровень упорядочивания, относительно которого оно (упорядочивание) и происходит для всех его потомков (естественно потомки, у которых z-index не равно auto создают уже свой уровень упорядочивания). Именно поэтому, например, элемент из одного уровня упорядочивания невозможно «положить» между двумя элементами из другого.
3. Корневой элемент создает корневой уровень упорядочивания, даже, если у него не указан z-index .

Давайте рассмотрим такой пример:

В этом примере при любых числовых значениях z-index у вас получится поменять местами только DIV3 и DIV4. А вот не получится следующее:

1. Не получится положить DIV3 и DIV4 под DIV2, так как они находятся на разных уровнях упорядочивания. DIV2 на уровне созданном элементом DIV1, а DIV3 и DIV4 на уровне созданном DIV2. Чтобы они были на одном уровне надо убрать z-index у DIV2 или установить его в auto .
2. Не получится положить DIV2 под DIV1. Чтобы получилось надо установить auto уже у DIV1.
3. И так далее...

В разных учебниках и справочниках понятие «Уровень упорядочивания» называют по разному - локальный позиционный контекст, локальный контекст стека и т.д. В официальной спецификации CSS оно пишется так - «local stacking context». Но на мой взгляд словосочетание «уровень упорядочивания» ближе к пониманию для большинства русскоговорящих людей, поэтому я и ввел это определение.

Тип свойства

Назначение: позиционирование .

Применяется: к элементам с position отличным от static.

Наследуется: нет.

Значения

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

• Число - любое целое положительное или отрицательное число, задающее порядок элементов внутри данного уровня упорядочивания. Элемент с бОльшим значением будет расположен поверх тех, у которых оно меньше. Если у двух элементов имеются одинаковые значения, то сверху будет тот, который находится ниже в HTML-коде. Кроме этого, элемент, имеющий числовое значение (в том числе и 0) создает новый уровень упорядочивания для своих позиционированных потомков.
• auto - при этом значении у элемента в текущем уровне упорядочивания такой же z-index , как и у его предка, который этот уровень создал. При этом сам элемент не создает новый уровень упорядочивания для своих потомков. Если есть несколько элементов с данным значением, то сверху будет тот, который стоит ниже в HTML-коде страницы.
• inherit - наследует значение z-index от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

Так как внутри элемента создающего уровень упорядочивания могут быть не только позиционированные элементы, но и какие-то другие, то браузеры используют определенный правила их наслоения в пределах данного уровня:

1. Первым слоем укладывается фон и рамка элемента, который создал данный уровень упорядочивания.
2. Сверху, вторым слоем, укладываются элементы-потомки, имеющие отрицательные значения z-index , где выше оказывается элемент со значением ближе к нулю.
3. Следующим слоем идут элементы-потомки, которые не являются встроенными (inline).
4. Четвертым слоем идут плавающие элементы (float) вместе со своим содержимым.
5. Пятый слой - это встроенные элементы-потомки.
6. Шестым слоем укладываются элементы с z-index auto или 0, где выше оказывается элемент стоящий ниже в коде.
7. И, наконец, на самом верху располагаются элементы с положительными значениями z-index , где выше оказывается элемент, имеющий большее значение.

Синтаксис

z-index: auto | число | inherit

Пример CSS: использование z-index

Результат.

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значение inherit . Также в этих браузерах новые уровни упорядочивания создают вообще все позиционированные элементы, а не только имеющие числовые значения z-index .

IE 6.0 всегда располагает элемент поверх всех элементов страницы, невзирая на значения z-index .

Firefox 2.0 укладывает элементы с отрицательными значениями z-index под фон и рамку элемента, который создал данный уровень упорядочивания. Другими словами он меняет местами пункты 1 и 2 в правилах наслоения.

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

For a positioned box (that is, one with any position other than static), the z-index property specifies:

1. The stack level of the box in the current stacking context .
2. Whether the box establishes a local stacking context.

Syntax

/* Keyword value */ z-index: auto; /* values */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* Negative values to lower the priority */ /* Global values */ z-index: inherit; z-index: initial; z-index: unset;

The z-index property is specified as either the keyword or an .

Values

auto The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent"s box. This that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as column-count, counter-increment, grid-column, grid-row, and z-index."> is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is 0 . This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Formal syntax

auto CSS data type is a special type of that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as column-count, counter-increment, grid-column, grid-row, and z-index.">

Examples

HTML

Dashed box Gold box Green box

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; }

Result

Specifications

Specification	Status	Comment
CSS Transitions The definition of "animation behavior for z-index" in that specification.	Working Draft	Defines z-index as animatable.
CSS Level 2 (Revision 1) The definition of "z-index" in that specification.	Recommendation	Initial definition

Initial value	auto
Applies to	positioned elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	an CSS data type are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the floor function.">integer
Canonical order	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
z-index	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 4	Safari Full support 1
Negative values	Chrome Full support 1	Edge Full support 12	Firefox Full support 3	IE Full support 4	Opera Full support 4	Safari Full support 1	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

« HDD Low Level Format Tool - низкоуровневое форматирование

Защита флэшки от Autorun-вирусов »

Поиск по сайту