position: absolute - это свойство CSS, которое позволяет задать позицию элемента относительно его первого родительского элемента, который имеет позиционирование, отличное от значения static. Элемент, установленный с position: absolute, не занимает места в потоке документа, и другие элементы могут занимать его место.
Для того, чтобы понять, как работает position: absolute, нужно знать еще несколько свойств CSS:
- top, bottom, left, right - свойства, которые используются для установки позиции элемента относительно его первого родительского элемента, который имеет позиционирование, отличное от значения static.
- z-index - свойство, которое используется для установки порядка наложения элементов, которые имеют позиционирование, отличное от значения static.
Давайте рассмотрим пример:
Здесь мы установили position: relative для родительского элемента .container. Затем мы установили position: absolute для дочернего элемента .box и задали ему свойства top и left со значением 50px. Как результат, .box элемент появляется относительно верхнего левого угла .container элемента, смещенного на 50px вниз и 50px вправо.
Другой важный момент - z-index. Если у вас есть несколько элементов с position: absolute, то вы можете использовать свойство z-index для установки порядка наложения элементов. Элементы с большим значением z-index будут находиться поверх элементов с меньшим значением z-index.
Давайте рассмотрим другой пример:
Здесь мы задали два элемента .box1 и .box2 с position: absolute. Затем мы установили z-index для каждого элемента. .box2 имеет более высокий z-index, чем .box1. Это означает, что .box2 будет находиться над .box1. Если мы установим одинаковый z-index для .box1 и .box2, то порядок наложения элементов будет зависеть от их расположения в HTML.