Чтобы сделать элемент поверх других элементов, можно использовать свойство 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 отрицательного элемента действительно работало в контексте зоны его видимости.