Een eerdere versie van de CSS Flexibele Box Layout-specificatie stelde de statische positie van absoluut gepositioneerde kinderen in alsof ze een flexibel item waren met een grootte van 0px bij 0px. De nieuwste versie van de specificatie haalt ze volledig uit de stroom en stelt de statische positie in op basis van eigenschappen uitlijnen en uitvullen. Op het moment dat we dit schrijven ondersteunen Edge en Opera 39 voor desktop en Android dit al.
Laten we bijvoorbeeld wat positioneringsgedrag toepassen op de volgende HTML.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
We zullen zoiets als dit toevoegen:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
In Chrome 52 of hoger wordt de geneste <div> perfect gecentreerd in de container <div> .
In niet-conforme browsers bevindt de linkerbovenhoek van het groene vak zich middenboven in het rode vak.
Als je dit zelf wilt proberen in Chrome of een andere browser, download dan ons voorbeeld of bezoek de live demo .