WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 4 weeks ago

#42300 new defect (bug)

Admin Bar CSS assumes body is not positioned

Reported by: joyously Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.5.7
Component: Toolbar Keywords: has-patch needs-testing
Focuses: css Cc:

Description

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.

Attachments (1)

42300.body-position-relative.patch (519 bytes) - added by sabernhardt 8 weeks ago.
set body to relative positioning in the admin bar CSS at 600px for the front end only

Download all attachments as: .zip

Change History (7)

#1 @SergeyBiryukov
4 years ago

Related: #30055

Last edited 4 years ago by SergeyBiryukov (previous) (diff)

#2 @sabernhardt
5 months ago

  • Focuses css added

This ticket was mentioned in Slack in #core by sabernhardt. View the logs.


4 months ago

@sabernhardt
8 weeks ago

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

#4 @sabernhardt
8 weeks ago

  • Keywords has-patch needs-testing added

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.

#5 @joyously
8 weeks ago

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.

#6 @sabernhardt
4 weeks ago

#43244 was marked as a duplicate.

Note: See TracTickets for help on using tickets.