Less Absolute Positioning With Modern CSS

Programming - Mar 31, 2024

Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements. For example, if you have a stack of elements that should all go on top of each other…

.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / -1;
}

All the elements occupy the same grid cell at that point, but you can still use alignment and justification to move stuff around and get it looking and behaving how you want.

What you are really saying with position: absolute is I want this element to be entirely removed from the flow such that it doesn’t affect other elements and other elements don’t affect it. Sometimes you do, but arguably less often than your existing CSS muscle memory would have you believe.

I’ll snag one of Ahmad’s idea here:

Both the tag and the title are positioned in a way we might automatically think of using absolute positioning. But again, something like CSS Grid has all of the alignment features we need to not only stack them vertically, but place them right where we want.

Direct Link →

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More