Свойство z-index

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	4.0+	1.0+	3.0+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

При оформлении дизайна веб ресурса может возникнуть ситуация, когда при определенном позиционировании два элемента будут наплывать друг на друга. Для определения элемента, который будет находится выше другого и перекрывать его, используют свойство z-index. В качестве значений используют числа, с учетом того, что сверху будет тот элемент, кторый имеет более высокое значение. Обязательное условие применение этого оператора - установка определенного позиционирование объекта, без этого z-index не подействует.

Как правильно задавать?

z-index: число;

Какие могут быть значения?

В качестве значений может использоваться любое число, однако браузер Firefox может конфликтовать с отрицательными значениями, поэтому в приоритете использование положительных значений. При равенстве значений более высокое положение займет объект, который находится в коде ниже другого.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство z-index</title>
  <style>
   .img1 {
    position:absolute;
	top:50px;
	left:97px;
	z-index:5;
	width:80px;
   }
   .img2 {
    position:absolute;
	top:0px;
	left:0px;
	width:140px;
   }
  </style>
 </head>
 <body>
  <img class="img1" src="logo.png">
  <img class="img2" src="1126.jpg">
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Позиционирование