Admin Bar CSS assumes body is not positioned

[joyously]

The Admin Bar is appended to the body of the page, and uses position: fixed for large windows. A space is made for it by using margin-top on the html tag.
This works fine until the media query for smaller windows changes it to position: absolute and there is user or theme CSS with body {position: relative}. The bar is then positioned relative to the body instead of html (leaving the margin visible and the bar over the top of body content).

I discovered this because I wanted to add a background overlay on the body, independent of the custom background, so I set the body position to relative and body:before to absolute.

A possible solution is to use body padding instead of html margin, but that might interfere more with theme CSS than the current method.

[SergeyBiryukov]

Related: #30055

[sabernhardt]

set body to relative positioning in the admin bar CSS at 600px for the front end only

[sabernhardt]

Using padding instead of margin probably would help with full-page layouts as well (#43244), though the discussion on #16222 concluded that margin was safer then. So it's unlikely safe to switch that 10 years later.

I uploaded another possibility: making the body positioned relative for everybody on the front end (not the admin side). So far, I tested it with Twenty Twenty-One and did not see any problem with this quick proof-of-concept using that theme.

[joyously]

Perhaps instead of
body:not(.wp-admin)
it should be
body.admin-bar:not(.wp-admin)
so it is only changed when the admin bar is there.
Of course, with this change, themes could have a problem if they already calculated that the admin bar was overlapping by 46px. My theme makes the body relative already, and I have
body.admin-bar { min-height: calc(100vh - 46px); }
I think I might have to change that with your proposed patch.

[sabernhardt]

#43244 was marked as a duplicate.