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.

[sabernhardt]

As I mentioned on ticket:40544#comment:6, I would like to consider keeping the position fixed. Browser support is at least better now, and I think it might be enough. If fixed positioning still is not an acceptable option, though, we need to find another way to fix this bug.

Do you have examples of themes with the relative body positioning and/or full-height layout? I made edits to a theme for that, but testing real themes would be better.

[joyously]

I don't know the details of many themes. My theme ​https://wordpress.org/themes/twenty8teen/ makes the body relative and has the aforementioned body height adjustment for the admin bar in a media query.

[sabernhardt]

Thanks for the theme example!