Большинство CSS свойств, которые web-разработчик использует регулярно, мгновенно появляются на странице. Например, когда вы добавляете background-color или font-size к элементу на странице, вы увидите результат сразу же после обновления страницы. Но некоторые другие свойства CSS не относятся к «подключи и играй», как хотелось бы.
Z-index является одним таких свойств. Очень часто, когда я раньше не понимал, z-index, я хотел бы попробовать применить его к элементу, надеясь, что элемент будет автоматически «прыгать» на первое место в порядке расположения страниц. Но этого не происходило, я отказывался от этого метода и попробовал другой способ решить проблему. Может быть, у вас есть похожий опыт. Надеюсь, эта статья будет прояснить некоторые недоразумения в отношении z-index.
ЧТО КОНКРЕТНО ОН ДЕЛАЕТ?
В принципе, z-index свойство устанавливает порядок элемента. Элемент с большим значение z-index будет перед другим элементом с меньшим значением z-index. Это слишком упрощенное определение. Именно поэтому начинающие CSS разработчики часто используют z-index неправильно.
Естественный порядок расположения элементов web-страницы определяется порядком, в котором элементы появляются в разметке страницы. Давайте посмотрим простой пример, который мы можем использовать, чтобы объяснить порядок наложения элементов и как z-index может быть использован правильно (и неправильно):
<div id="header">
<p>This is the header</p>
</div>
<div id="article">
<p>This is an article</p>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
Z-index используется, когда элементы накладываются друг на друга.
В приведенной выше разметке, у нас есть три <div> элемента (заголовок, статья, и футер), одни за другим. Скажем, наш дизайн страницы требует, чтобы заголовок перекрывал верхнюю частью статьи на 10 пикселей, и статья перекрывала футер на 10 пикселей.
Чтобы понять, что я говорю, вот пример с разметкой выше. Цвет фона и граница в 3px применяется к каждому из элементов, поэтому их можно легко отличить друг от друга:
Теперь, давайте посмотрим на тот же пример, с отрицательным вертикальным отсутпом margin-top, которым применяется ко всем трем элементам:
Так как мы применили отрицательный отступ, теперь мы можем физически увидеть по умолчанию порядок размещения элементов в действии. «Статья» перекрывает элемент «заголовок» по той простой причине, что «статья» появляется после «заголовок» в разметке. И то же самое относится и к «футер», и почему он перекрывает «статья».
Решение проблемы без z-index
Этот пример показывает нам, что z-index не является единственным решением «порядка наложения». Иногда, вы можете решить такой вопрос просто изменив порядок элементов в HTML, а затем разместив их соответствующим образом.
ПОПЫТКА РЕАЛИЗАЦИИ C Z-INDEX
Но, допустим, мы хотим, чтобы эти 3 элемента остались именно там, где они есть, и, по тем или иным причинам, не может переставлять элементы в разметке. Мы хотим, чтобы заголовок статьи перекрывал статью, и статья перекрыла футер. В нашем CSS давайте применим z-index для элементов и посмотрим, что происходит:
#header {
background: blue;
border: solid 3px pink;
z-index: 3;
}
#article {
background: red;
border: solid 3px purple;
z-index: 2;
}
#footer {
background: green;
border: solid 3px yellow;
z-index: 1;
}
А вот пример страницы с этими новыми стилями:
Вы заметили разницу? Если да, то вам нужно посмотреть еще раз. Здесь никаких визуальных отличий между этим примером и предыдущим. Хотя мы добавили z-index для каждого элемента и значения идут в обратном порядке, z-index не имеет никакого эффекта. Почему нет?
ПОЧЕМУ НЕ РАБОТАЕТ?
Z-index работает только с элементами, которые были позиционированы (например, position: absolute;)
В этом примере мы можем применить position: relative к нашим <div> (который будет распространяться на все 3 элемента), и порядок наложения элементов немедленно вступит в силу. Вот исправленный пример:
Теперь все в порядке и работает, как надо.
Некоторые примечания к помнить о Z-Index
Z-index свойство влияет на положение элемента на Z-оси. Чем выше z-index, тем ближе элемент будет для пользователя.
Z-index обычно выражается в целых числах в качестве значения, но также может принимать значения inherit и auto, хотя должным образом работают не во всех браузерах.
Чтобы изменить z-index элемента с JavaScript, вы должны использовать, например, myElement.style.zIndex = 100.
РЕЗЮМЕ
Z-index может быть мощным инструментом при правильном использовании, и может предложить очень простое решение многих вопросов, относящихся к перекрытиям элементов. Пока вы помните, что значение z-index применяется только к позиционированным элементам, у вас не будет проблем с использованием этого интересного свойства CSS.
Спасибо за внимание!
