Better bump CSS for admin bar: don't assume static position on body

[aaylasecura]

Apologies if this has already been raised, but I could not find a ticket for that.

I suggest an improvement to the CSS for the admin bar which currently assumes and relies on body and html both having "position: static". By default they do, but there are many cases where one would need to set "position: relative" on the body (for example in order to be able to use absolute positioned elements with a bottom offset.

Currently, the bump CSS for the admin bar sets a margin on the html (root) element to push it down and then positions itself as absolute on narrow screens. Having position absolute, if all the ancestors have position static (default) would mean it's positioned relative to the viewport, which is the intended behaviour and flushes the admin bar to the top of the page on mobile. However, as soon as body or html get position relative, then the admin bar is also offset by the same margin and results in this:

A white space at the top and the admin bar overlapping the content.

I can think of two alternative approaches that result in the same admin bar behaviour that work regardless of the position type of body/html.

Option 1 (depends on sticky position which is not supported in IE):

• put the admin bar as the first child of body
• admin bar is sticky on wide screens, relative on narrow

Option 2 (supported even on very old browsers):

• insert a dummy element as the first child of body with the same height as admin bar
• admin bar is fixed on wide screen, absolute on narrow

Option 1 demo: ​https://jsfiddle.net/oxfhk392/

Option 2 demo: ​https://jsfiddle.net/4rn51mbf/

[sabernhardt]

Hi and welcome to WordPress Core Trac! Thanks for the report!

This is already tracked on #42300, if you would like to continue the discussion there.