Positioning

Met position haal je een element uit zijn natuurlijke plaats. Er zijn vijf waarden.

Waarde	Blijft in de flow?	top/left/… verschuift t.o.v.
static	ja (de standaard)	niets, ze doen niets
relative	ja, met een gat op de oude plek	zijn eigen natuurlijke plaats
absolute	nee, de rest schuift op	het containing block
fixed	nee	het browservenster, ook als je scrollt
sticky	ja, tot je erlangs scrollt	relative tot de drempel, daarna fixed

Het containing block is de eerste parent met een position die niet static is. Heeft geen enkele parent dat, dan is het de viewport.

position: relative op de parent, absolute op het kind

position: relative op de parent, position: absolute op het kind. Zonder die eerste regel springt je kind naar de hoek van het scherm. Je komt het tegen bij de cards.

Probeer

• zet position op elk van de vijf waarden
• zet daarna position: relative aan op .demowrapper en kijk opnieuw naar absolute
• scroll naar beneden met fixed en met sticky

💡 Vraag

• Bij relative blijft er een gat waar doos 2 stond, bij absolute niet. Waarom is dat verschil belangrijk als je een badge op een card wilt zetten?
• Waarom gebruik je voor een header sticky en niet fixed? Kijk wat er met de inhoud onder de header gebeurt.

Wanneer gebruik je het

Met positioning zet je elementen in lagen, op coördinaten. Dat werkt voor kleine dingen binnen een blok: een label over een afbeelding, een badge op een kaart, een menu dat openklapt.

Niet voor je paginaopbouw

Je kent de exacte afmetingen van je elementen niet, en je kent de schermbreedte van je bezoeker niet. Een pagina die op coördinaten gebouwd is, valt uit elkaar zodra één van beide verandert.

Voor paginaopbouw gebruik je flexbox of grid (buiten de scope van de cursus).