[wp-trac] [WordPress Trac] #26609: Admin Bar pushed down at screens of 600px width and lower on the frontside

[WordPress Trac]

#26609: Admin Bar pushed down at screens of 600px width and lower on the frontside
-------------------------------------------+-----------------------
 Reporter:  Funkatronic                    |       Owner:
     Type:  defect (bug)                   |      Status:  reopened
 Priority:  normal                         |   Milestone:  3.9
Component:  Toolbar                        |     Version:  3.8
 Severity:  normal                         |  Resolution:
 Keywords:  reporter-feedback needs-patch  |
-------------------------------------------+-----------------------
Changes (by Funkatronic):

 * keywords:  needs-patch => reporter-feedback needs-patch


Comment:

 Replying to [comment:4 Veraxus]:
 > Confirming this problem.
 >
 > At 600px, `#wpadminbar` is changed from `position:fixed` to
 `position:absolute`.
 >
 > In CSS, fixed position is always relative to the window, whereas
 absolute positioning is relative to the first ancestor element with a non-
 static position.
 >
 > Many major front-end frameworks and boilerplates use positioning
 overrides ( e.g. `position:relative` ) on the `html` and/or `body`
 elements as routine corrective/normalization practice - so when the admin
 bar changes from `fixed` to `absolute` positioning, it does '''not''' snap
 to the top of the ''window'' as expected, but to the top of the `body`
 element, which has been shifted 46px from the top of the window due to the
 top margin.
 >
 > Considering how commonplace explicit `body` element positioning is as a
 routine normalization practice (particularly when off-canvas layouts are
 to be employed), I would say that this constitutes a serious
 problem/oversight in core.
 >
 > There are a number of potential fixes by theme creators, but this
 ''should'' be remedied in core.
 >
 > When the screen is `max-width:600px`, the `html` and `body` should be
 explicitly set to `position: relative` (which is more common than not,
 anyway). The admin bar should then be positioned `top:-46px` to
 compensate. Problem solved.

 Actually, wouldn't it be `position:static` since that is the default
 positioning for most elements in html?  I tried `relative` and it stayed
 the same but `static` fixed the issue.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26609#comment:7>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software