Наложение и порядок слоёв



Влад Мержевич

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

Карты рядом друг с другом

Рис. 3.51. Карты рядом друг с другом

Карты одна на другой

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Воображаемые координаты веб-страницы

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }
  </style>
 </head>
 <body>
  <p class="card">
   <img src="images/3.png" alt="3" class="three" />
   <img src="images/7.png" alt="7" class="seven" />
   <img src="images/ace.png" alt="Туз" class="ace" />
  </p>
 </body>
</html>

В CSS за положением по Z-оси отвечает свойство z-index, которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2; }
.ace { left: -295px; z-index: 1; }

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover.

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .three { top: 50px; left: 55px; z-index: 5; }
   .seven { left: -120px; top: 25px; z-index: 2;}
   .ace { left: -295px; z-index: 1; }
   .card IMG:hover { z-index: 10; }</style>
 </head>
 <body>
  <p class="card">
   <img src="images/3.png" alt="3" class="three" />
   <img src="images/7.png" alt="7" class="seven" />
   <img src="images/ace.png" alt="Туз" class="ace" />
  </p>
 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.