[wp-trac] [WordPress Trac] #62663: Better bump CSS for admin bar: don't assume static position on body

[WordPress Trac]

#62663: Better bump CSS for admin bar: don't assume static position on body
-------------------------+-----------------------------
 Reporter:  aaylasecura  |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Toolbar      |    Version:
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 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:

 [[Image(https://i.imgur.com/4jeJc0T.png)]]

 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/

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62663>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform