Как раз и навсегда понять CSS Position Absolute

Перестаньте терять элементы на экране, поняв, как объект занимает то место, где он должен находиться

Абсолютное позиционирование элемента больше связано с позицией контейнера элемента, чем с его собственным. Чтобы иметь возможность позиционировать себя, он должен знать, относительно какого родительского div он будет позиционироваться.

В приведенном ниже коде показаны четыре вложенных div. .box-1чтобы .box-3сосредоточены display: flexи margin: autoтолько. .box-4не marginустановлен, и он находится в своей позиции по умолчанию в потоке документов.

positionСвойство не задано для всех элементов.

body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

Чтобы иметь возможность позиционировать себя, элемент должен знать две вещи:

  • координаты для ее xи yнабора положения либо путем top, right, bottom,left
  • какой родитель будет позиционировать себя относительно

При применении position: absoluteк .box-4элементу удаляется из normal document flow. Поскольку его координаты не установлены, он просто остается в позиции по умолчанию, которая является его родительским div в верхнем левом углу.

Установив top: 0и left: 0элемент , то должен знать , какой родитель он будет рассматривать в качестве опорной точки. Чтобы быть ссылкой, элемент должен быть расположен на экране с помощью position: relative. .box-4затем начинает спрашивать свои родительские блоки, размещены ли они. Сначала он спрашивает .box-3и получает No, I am not positioned.ответ. То же самое .box-2и потом .box-1, поскольку все они position: unset.

Поскольку .box-4не удалось найти позиционированный родительский объект, он позиционирует себя относительно body. Этот элемент всегда располагается на экране:

Если мы устанавливаем position: relativeв .box-1, когда .box-4спрашивает его: Are you positioned?он получает Yes I am.в ответ. А затем .box-4будет позиционироваться относительно .box-1:

То же самое .box-2и с .box-3.

Абсолютно позиционированный элемент будет позиционироваться относительно ближайшего позиционированного предка.

Как только он находит позиционированного предка, положение элементов над ним теряет актуальность. Изображения ниже показывают расположение по настройке position: relativeк .box-2 и .box-3, соответственно:

Вы также можете найти видео-объяснение на Code Sketch Channel ?.

Спасибо за прочтение! ✌️

Первоначально опубликовано на marina-ferreira.github.io.