Как сделать блок поверх всех блоков css

Существует несколько способов придать блоку позиционирование поверх всех блоков с помощью CSS:

1. Использование свойства z-index

Свойство z-index позволяет установить порядок наложения блоков в пространстве. Блок с большим значением z-index будет находиться поверх блоков с меньшим значением z-index.

.block-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

Значение z-index должно быть положительным целым числом. Чем выше значение, тем выше находится элемент. В примере выше мы установили значение в 9999, чтобы наш блок был на вершине стека и скрывал под собой все остальные блоки.

2. Использование свойства position

Если мы хотим, чтобы блок был наложен только на определенный родительский элемент, мы можем использовать свойство position и установить для элемента значение absolute или fixed. Затем мы можем установить значения top, right, bottom и left, чтобы точно определить позицию элемента.

<div class="block-parent">
  <div class="block-top"></div>
</div>

.block-parent {
  position: relative;
}

.block-top {
  position: absolute;
  top: 0;
  left: 0;
}

В этом примере мы установили для родительского блока .block-parent значение position: relative, чтобы сделать его контекстом позиционирования для внутреннего блока .block-top, который мы установили как position: absolute. Теперь мы можем точно определить позицию внутреннего блока с помощью значений top, right, bottom и left, относительно родительского блока .block-parent.