Alternatives to absolute positioning | Ahmad Shadeed

Ahmad has put together some really interesting examples of where modern CSS techniques can replace traditional use-case for absolute positioning. I'd be really interested to know how some of them work with assistive technologies, but my gut instinct is that they're probably more accessible (on average), too.

One of the most useful techniques is one I have used, but frequently forget: stacking elements using CSS Grid. Ahmad has a particularly useful shorthand for condensing everything down to one grid cell:

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

For things like background images on cards, it's great, but the application also shows a way to position small "labels" or "tags"; very clever 👏

They also dive into display: contents, a relatively new addition to CSS that I've not explored at all. The ability to effectively "remove" wrapping elements within Flexbox and Grid contexts is particularly powerful:

<style>
 .wrapper {
   display: contents;
 }

 flex * {
   margin-top: 1rem;
 }
</style>

<div class="flex">
   <div class="wrapper">
      <h2>Title</h2>
      <p>Description</p>
   </div>
   <img src="..." alt="..." />
</div>

As Ahmad puts it, the .wrapper is now a "hidden ghost" in the DOM, so will not get the margin applied. Better still, you can then reorder the content as if the wrapper wasn't there:

.wrapper {
   display: contents;
}

h2, img {
   order: -1;
}

👆 Will result in the image inserting itself between the headline and description. Useful for components that might want to shuffle order based on API properties, for example.

Finally, there's this little nugget (as well as some generally useful notes on things like aspect-ratio):

No more using position: absolute with CSS transforms. For example, we can use margin: auto to center a flex item both horizontally and vertically.

Somehow, I had no idea that auto margins worked on the vertical axis in Flexbox; that's extremely useful 🤦‍♂️👏

That said, Ahmad does end the article with an example where absolute positioning may be the right solution. I say may because I'm not actually convinced. The alternative shown – negative margins – makes more sense to me in most situations, but a potentially better solution would be to use a background gradient to create the entirely empty "blue box" heading element. It's purely decorative, so why use a DOM node in the first place? That way, the user's avatar doesn't need to be repositioned out of normal flow at all. Just my 2c 😄