Как да разберем 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след това започва да пита своите родителски divs дали са позиционирани. Отначало пита .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.