Wat is een stacking context?

Wat is een stacking context? Het is een eigen laagvolgorde binnen één element.

Alles wat erin zit, wordt onderling gestapeld.

Ten opzichte van de rest van de pagina telt alleen de plek van dat ene element.

De vergelijking met papier

Leg tien vellen in een mapje. Hoe je die vellen ook ordent, het mapje als geheel ligt op één plek in de stapel.

Meer daarover lees je bij wat z-index is.

Wanneer zo’n mapje ontstaat

Bij een doorzichtigheid onder de honderd procent, bij een verschuiving of draaiing, en bij een filter of schaduweffect.

Meer daarover lees je bij css.

Waarom dat verwarrend is

Je stelt een hoge waarde in en er gebeurt niets. De oorzaak zit dan niet bij je element maar bij zijn omhulsel.

Meer daarover lees je bij een menu achter een afbeelding.

Wat er een laag opent

1. Een doorzichtigheid lager dan honderd procent.
2. Verschuiven, draaien of schalen.
3. Een filter of een schaduw met vervaging.
4. Een vaste positie op het scherm.

Punt één is de sluipmoordenaar, want een doorzichtigheid van 99 procent zie je met het blote oog niet.

Hoe je het gebruikt

Bewust een laag openen is soms handig: alles binnen een blok blijft dan netjes bij elkaar.

Meer daarover lees je bij ui.

Hoe je het opspoort

Ontwikkelaarsgereedschap in Chrome toont per element of het een eigen laag vormt.

Meer daarover lees je bij problemen voorkomen.

Veelgestelde vragen hierover