Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство z-index

Дата:17.10.15 в 15:47
Справочник: 

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

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

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>

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

z-index

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: