Modern CSS Can Replace Absolute Positioning in Many Cases
Ahmad Shadeed makes the case in a recent article that developers may rely on position: absolute far more often than they actually need to. One common scenario is stacking elements on top of one another. If you have several elements that should occupy the same space, you can place them all in the same grid cell instead.
.stack {
display: grid;
}
.stack > * {
grid-area: 1 / -1;
}Once all the elements share a single grid cell, alignment and justification properties give you full control to position and reorder them as needed without pulling anything out of the document flow.
The real meaning of position: absolute is: take this element entirely out of the flow
, so it neither affects nor is affected by neighboring content. That's occasionally what you want, but Shadeed argues it's rare compared to what our CSS habits suggest. He offers examples like a tag and a title that seem like natural candidates for absolute positioning; with CSS Grid, however, all the alignment tools you need are already available to stack them vertically and pin them exactly where you want them.
