Opinion: absolute; When you shouldn't use position: absolute

In General

I was reviewing code of my colleague the other day, and we got into a discussion about how best to position an elements in a header.

To center the text in one of the elements, my colleague chose to position: absolute that element, setting the header wrapper element as position: relative. It worked, but it looked hacky to me.

I am a firm believer of being declarative and explicit. It makes maintenance easier and I think it is better for accessibility.

The Details

Space was sparse as we were looking at the mobile version. There were no clear guidelines from the designer, so we each had our view of what should happen.

The structure of the header was supposed to be:

[Logo] ........ [Page Title] ........ [email]

• The Logo has a fixed size and ratio (say 40x40px) and should be left aligned.
• The Page Title changes based on the page being rendered, and should be always centered.
• The email was variable in the sense that different users would have different lengths of an email. [e-mail] would be shorter than [e-mail]. Email should be right aligned.

My colleague chose to make the Page Title element absolute, spanning the whole width of the page. With a long enough title, all sections might overlap, so we'ed have to take care of that. Beside that technical challenge, I think this is not a good use for absolutely positioning elements.

I believe that we should use absolute positioning where that is exactly what is required - an element being positioned in a specific, absolute distance from its parent/root, regardless of any other elements that may exist around it.

Quoting Chris Coyier's article on CSS-Tricks Absolute, Relative, Fixed Positioning: How Do They Differ?:

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

My suggestion

Use display: grid. The grid lets us define the exact structure for each of the blocks as well as overlap and internal alignment.
Originally I thought we can use display: flex, but the alignment didn't pan out too well. Maybe we didn't dig around enough?

I'd love to hear your thoughts!

Do you agree that position: absolute should be used only where it is explicitly required? Have you seen other abuses of absolute positioning?