z-index

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS2+
Значение по умолчанию	auto
Наследуется	Нет
Применяется	К любым позиционированным элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

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

Аргументы

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

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

      <title>z-index</title>

      <style type="text/css">

      #layer1, #layer2, #layer3, #layer4 {

  position: relative;  /*Относительное позиционирование*/

  }

  #layer1, #layer3 {

  font-size: 50px;  /*Размер шрифта в пикселах*/

  color: #000080;  /*Синий цвет текста*/

  }

  #layer2, #layer4 {

  top: -55px;  /*Сдвигаем текст вверх*/

  left: 5px;  /*Сдвигаем текст вправо*/

  color:  #ffa500;  /*Оранжевый цвет текста*/

  font-size: 70px;  /*Размер шрифта в пикселах*/

  }

  #layer1 {
  z-index: 2;
  }

  #layer2 {
  z-index: 1;
  }

  #layer3 {
  z-index: 3;
  }

  #layer4 {
  z-index: 4;
  }

  </style>

  </head>

  <body>

   <p>Слой 1 наверху</p> 

   <div id="layer1">Слой 1</div> 

   <div id="layer2">Слой 2</div> 

   <p>Слой 4 наверху</p> 

   <div id="layer3">Слой 3</div> 

   <div id="layer4">Слой 4</div> 

    </body>

    </html>

Демонстрация примера

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

[window.]document.getElementById("elementID").style.zIndex

Примечание

Список, созданный с помощью тега<select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index. Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0. В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

z-index

Категории

Последние комментарии

	Русский
	English