Многим молодым разработчикам трудно объяснить, что делает каждый раздел их кода. Хотя это они недавно завершили потрясающий проект.
Оценивая себя, когда я начал учиться программировать, я столкнулся с некоторыми трудностями при обучении программированию. Обычно я завершал и отправлял проекты, не имея возможности объяснить, что делает каждая часть моего кода.
Я искал разные способы увидеть конкретный результат в своем проекте, и как только я натолкнулся на решение, похожее на то, что мне нужно, я бы скопировал код и повторно использовал его без правильного понимания того, как работает код. Моей целью было добиться результата.
Я считаю, что многие молодые программисты сталкиваются с этой проблемой, поэтому я решил написать эту статью, чтобы обсудить одно конкретное свойство CSS (z-index), которое у меня было проблемы с пониманием того, как это можно использовать. Я считаю, что эта статья поможет многим программистам, которые могут столкнуться с той же проблемой.
Z-индекс
Свойство z - index определяет порядок стека элемента. Элемент с более высоким порядком стека всегда находится перед элементом с более низким порядком стека. Примечание. z - index работает только с позиционированными элементами (position: absolute, position: relative, position: fixed или position: sticky).
div {
z-index: 1; / * Присваиваем элементу div значение z-index, равное 1 * /
}
Чтобы лучше понять использование свойства z-index, нам необходимо определить следующее:
- Позиционированный элемент
- Непозиционированный элемент
позиционированный элемент - это элемент, отображаемое значение которого может быть относительным, абсолютным, закрепленным или любым, кроме статического.
Элемент непозиционированный - это элемент со статическим свойством отображения по умолчанию.
Свойство z-index принимает одно значение integer или auto и выглядит очень простым в реализации. Это может показаться трудным для реализации при работе над проектами, требующими множественного стекирования.
Типичный пример показан ниже:
Просматривая приведенную выше диаграмму, вы можете увидеть, как разные элементы накладываются друг на друга, просто играя со значением z-index. Рядом с вами появится элемент с более высоким значением z-index. Это заставляет элемент выглядеть так, как если бы он выскочил или сложился (сверху) на других элементах.
Типичный пример сложенных элементов показан ниже:
Код для приведенного выше примера находится здесь на Codepen.
Загрузите код из репозитория Github
Если присвоить любому элементу более высокое значение z-index, он будет располагаться на вершине.
Свойство z-index также может принимать отрицательное значение. Эффект z-index на элемент заключается в том, что он помещает элемент позади в стек.
В приведенном выше коде имеется отрицательный z-индекс, который помещает элемент как за позиционируемыми, так и за непозиционируемыми элементами в проекте кода. Результат примера кода показан ниже:
Найдите ссылку на код на Codepen здесь
Z-index - очень важное свойство, которое используется в качестве слоев в Photoshop. Это дает возможность размещать элементы друг на друге.
использованная литература
- MDN: Понимание z-индекса CSS
- LittleWebHut: Ссылка CSS 2.1: свойство z-index
- Learningo.club: https://learningo.club/how-to-stack-html-element-using-the-z-index-property/
