Думаю что многие сталкивались с проблемой наложения одного элемента на другой (например, блок div, картинка), но не у всех получалось ее решить. Сегодня мы это исправим)
Для начала нам нужно создать три блока с классами "block1, block2, block3", а также задать ширину и высоту для каждого из них. Каждый блок будет иметь свой цвет (в моем случае это черный, зеленый и синий) и сдвигаться один относительно другого (за счет относительного позиционирования). Вот что у вас должно получиться:
С базовой подготовкой мы разобрались, теперь переходим к самому интересному)
Допустим нам нужно полностью изменить порядок идущих друг за другом блоков. Это можно сделать с помощью свойства z-index значения которого выражаются в целых числах (положительные, отрицательные и ноль). Чем больше значение, тем "выше" будет находиться данный элемент по отношению к другим элементам по оси-z (если значение отрицательное все работает с точностью до наоборот).
Важно! Св-во z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Переходим к наглядному примеру:
При сравнении верхнего и нижнего изображения видно что черный блок с третьей позиции перескочил на первую, а синий - с первой на третью. Другими словами произошла смена позиций, позволившая нам изменить порядок следования блоков.
Для тех кто хочет попробовать свои варианты размещения я оставляю ссылку на данный пример.
Спасибо за внимание!
Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.
