Absolutt posisjonering og containing block

Et absolutt posisjonert element fjernes fra den normale dokumentflyten. Andre elementer oppfører seg som om det ikke eksisterer. Det posisjoneres relativt til sitt nærmeste posisjonerte overordnede element.

Containing block for et absolutt posisjonert element er det nærmeste overordnede elementet med en position-verdi som er noe annet enn static. Hvis ingen finnes, posisjoneres elementet relativt til initial containing block (viewporten).

Det vanligste mønsteret er å legge position: relative til en forelder for å inneholde absolutt posisjonerte barn.

Med absolutt posisjonering måles top/right/bottom/left fra paddingkanten til den inneholdende blokken.

Den klassiske sentreringsteknikken for absolutte elementer:

Absolutt posisjonerte elementer tilpasses innholdets størrelse som standard (med mindre width/height er angitt). De strekker seg ikke lenger over hele bredden til containeren, slik blokkelementer gjør.

Ved å sette alle fire kanter til 0 strekkes et absolutt posisjonert element slik at det fyller den inneholdende blokken:

Egenskapen inset er en kortform for top, right, bottom og left samlet:

Absolutt posisjonerte elementer deltar i stablingskontekster. Bruk z-index for å kontrollere hvilke overlappende absolutte elementer som vises øverst.

Hvis position: relative glemmes på forelderen, posisjoneres et absolutt barn relativt til det nærmeste allerede posisjonerte overordnede elementet – ofte viewporten. Kontroller alltid den inneholdende blokken.

En flex- eller grid-container er ikke automatisk et posisjonert element. position: relative må fortsatt legges til eksplisitt for at containeren skal bli en inneholdende blokk for absolutte barn.

Absolutt posisjonerte elementer forlater dokumentflyten og posisjoneres relativt til sitt nærmeste overordnede element som ikke er statisk. Legg alltid position: relative til forelderen for å kontrollere plasseringen. Bruk inset: 0 for å strekke et absolutt element slik at det fyller containeren.