Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
z-index

Данное свойство применяется к элементам, в отношении которых установлено свойство position.

Допустимые значения свойства z-index:

Integer - целое число, определяющее положение элемента в текущем или локальном стеке.

Auto – значение z-index для текущего элемента определяется значением z-index его родительского элемента. Однако данный блок не основывает локальный z-index.

Далее в тексте термин «спереди» означает позицию элемента, находящегося в проекции, при движении от экрана монитора к пользователю.

В CSS2 элементы рассматриваются с точки зрения трёх измерений. Первые два – горизонтальное и вертикальное, третье - измерение по оси Z. Последнее измерение наиболее полезно при наложении слоёв друг на друга, о котором мы далее и поговорим.

Каждый из элементов находится в стеке, и у каждого из элементов есть собственное значение, которое определяется целым числом, и устанавливает позицию данного элемента в стеке. Чем выше значение, тем выше его позиция в данном стеке. Блоки со значением меньшим, чем у других элементов находятся сзади последних, а элементы со значением большим, чем значение других элементов находятся спереди.

Разберём следующий пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Z-index в CSS</TITLE>
  5. <STYLE type="text/css">
  6. .pile {
  7. position: absolute;
  8. left: 2in;
  9. top: 2in;
10. width: 3in;
11. height: 3in;
12. border:2px inset #fff;
13. }
14. img {
15. position: absolute;
16. left: 270px;
17. top: 280px;
18. border:2px inset #fff;
19.
20. }
21. #text1{
22. background-color:red;
23. width:200px;
24. height:100px;
25. }
26. #text2{
27. background-color:blue;
28. width:400px;
29. height:400px;
30. }
31. #text3{
32. background-color:yellow;
33. width:300px;
34. height:300px;
35. left: 1in;
36. top: 1in;
37. }
38.
39. </STYLE>
40. </HEAD>
41. <BODY>
42.<P>
43. <IMG id="image"
44. src="img.jpg" alt="A butterfly image"
45. style="z-index: 5">
46.
47.<DIV id="text1" class="pile"
48. style="z-index: 3">
49. Данный элемент перекрывается только изображением,
50. но перекрывает остальные элементы.
51.</DIV>
52.
53.<DIV id="text2">
54. Данный элемент будет находиться снизу любых других элементов.
55.</DIV>
56.
57.<DIV id="text3" class="pile"
58. style="z-index: 2">
59. Данный элемент перекрывает только элемент с id text2.
60.
61.</DIV>
62. </BODY>
63.</HTML>
64.
65.
Пример свойства z-index
Пример свойства z-index
В этом примере элементы в стеке будут располагаться следующим образом (от страницы к пользователю):

Первым будет идти элемент с id text2, поскольку для него не установлен z-index и по общему правилу он равен 0, спереди него будет находиться элемент id text3 поскольку его z-index равен 2 затем элемент с id text1 и самым верхним из них будет изображение.

Этот пример объясняет общий для всех элементов z-index. Однако существует понятие локального z-index`а. Локальный z-index возникает, когда для дочерних элементов одного «родителя» устанавливается свойство z-index, в этом случае дочерние элементы будут находиться в стеке создаваемом родительским элементом.

Следующий пример наглядно поясняет применение локального z-index`а.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Локальный z-index</TITLE>
  5. <STYLE type="text/css">
  6. .pile {
  7. position: absolute;
  8. left: 2in;
  9. top: 2in;
10. width: 3in;
11. height: 3in;
12. border:2px inset #fff;
13. }
14. img {
15. position: absolute;
16. left: 270px;
17. top: 280px;
18. border:2px inset #fff;
19.
20. }
21. #text1{
22. background-color:red;
23. width:200px;
24. height:100px;
25. }
26. #text2{
27. background-color:blue;
28. width:400px;
29. height:400px;
30. }
31. #text3{
32. background-color:yellow;
33. width:300px;
34. height:300px;
35. left: 1in;
36. top: 1in;
37. }
38. .localzindex1{
39. position: absolute;
40. left: 140px;
41. top: 20px;
42. color:#fff;
43. width:100px;
44. height:100px;
45. background-color:black;
46. }
47. .localzindex2{
48. position: absolute;
49. left: 20px;
50. top: 20px;
51. color:#fff;
52. width:100px;
53. height:100px;
54. background-color:green;
55. }
56. </STYLE>
57. </HEAD>
58. <BODY>
59.<P>
60. <IMG id="image"
61. src="img.jpg" alt="A butterfly image"
62. style="z-index: 5">
63.
64.<DIV id="text1" class="pile"
65. style="z-index: 3">
66. Данный элемент перекрывается только
67. изображением, но перекрывает остальные элементы.
68.</DIV>
69.
70.<DIV id="text2">
71. Данный элемент будет
72. находится снизу любых других элементов.
73.</DIV>
74.
75.<DIV id="text3" class="pile"
76. style="z-index: 2">
77. Данный элемент перекрывает только элемент с id text2.
78. <div class="localzindex1" style="z-index: 10">
79. Первый элемент с локальным z-index</div>
80. <div class="localzindex2" style="z-index: 11">
81. Второй элемент с локальным z-index</div>
82. </DIV>
83. </BODY>
84.</HTML>
85.
86.
87.
Пример свойства z-index
Пример свойства z-index
Как бы не хотелось, чтобы элементы с z-index`ом 10 и 11 были спереди всех элементов, это не возможно, поскольку данные элементы находятся в ином стеке, нежели элементы с меньшим z-index`ом. Данные элементы создают локальный z-index для элемента с id text3, однако он так же имеет свой z-index, который более весом, нежели локальный z-индекс.


Доступ и установка с jQuery

  • Получить свойство zIndex: val = $("div").css("zIndex");
  • Установить свойство zIndex: $("div").css({"zIndex":"..."});
  • Установить свойство zIndex: $("div").css("zIndex","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org