Чтобы сделать элемент поверх других элементов, можно использовать свойство z-index. Оно определяет порядок наложения элементов в стеке и задает глубину элемента.
Самый простой способ задать z-index — использовать положительные целочисленные значения. Элементы с большим значением z-index находятся поверх элементов с меньшим значением. Если элементам не задано значение z-index, то они находятся в стеке со значением z-index по умолчанию (auto), и их порядок будет зависеть от порядка их следования в HTML-коде.
Например, если у нас есть два элемента, и мы хотим, чтобы второй элемент находился поверх первого, то можно задать второму элементу значение z-index:
.first-element {
position: relative; /* необходимо задать позиционирование родительскому контейнеру */
z-index: 1;
}
.second-element {
position: relative; /* необходимо задать позиционирование элементу, чтобы z-index сработал */
z-index: 2;
}Независимо от порядка указания элементов в HTML-коде, второй элемент будет отображаться поверх первого.
Но иногда элементу нужно задать отрицательное значение z-index, чтобы переместить его под другой элемент. В этом случае нужно не забыть задать для родительского элемента или для соседних элементов position и значение z-index, чтобы значение z-index отрицательного элемента действительно работало в контексте зоны его видимости.
