В этом уроке вы увидите, как работает атрибут z-index и как его можно применить.
На одном небольшом участке окна веб-браузера можно "напихать" много позиционированных элементов и они будут накладываться друг на друга в соответствии с положением их объявления в коде web-страницы.
Указывая значения атрибута z-index: … ; можно регулировать порядок отображения элементов относительно друг друга.
Важно заметить, что данное свойство работает только для элементов, у которых в значении position: задано - fixed, relative или absolute.
Что бы наглядно продемонстрировать всё выше написанное сделаем пример, в котором создаются три блока, для которых задаются некоторые стили, а так же значения z-index: …;
Значения этого атрибута будут заданы в обратном порядке относительно расположения элементов – то есть тот элемент, который должен был отображаться выше всех блоков- будет отображаться ниже всех блоков. Помимо этого будет описано событие :hover для двух блоков – при на ведении курсора мышки на блок его z-index становиться максимальным и блок отображается по верх всех других блоков.