Skip to content

WordPress admin bar and absolute CSS positioning

WordPress 3.2 introduced an admin bar, which is fixed at the top of the window when you’re logged in. An annoying side-effect that has been bugging me for some time is that, although this pushed down most of my content, HTML elements that used absolute positioning stayed in there old place. This didn’t look particularly good, but I left it hanging for a long time because it only affected logged in users (that is: either me or Halfgaar).

The fix is actually rather simple. I added the following rule:

body { position: relative; }

It may seem non-obvious, but absolutely positioned elements are actually positioned relative to their relatively positioned ancestors. Well, just read the proper explanation at CSS-Tricks. I can’t explain this shit.

WordPress admin bar with correct positioning

How it was supposed to look

WordPress admin bar induced CSS positioning screw-up

How it really looked

    4 Comments ( Add comment / trackback )

    1. (permalink)
      Comment by Naved Ahmed
      On February 13, 2013 at 14:28

      Thanks a lot Rowan. 🙂

    2. (permalink)
      Comment by Rowan Rodrik
      On February 14, 2013 at 01:08

      Glad to have been of service, Naved. 🙂

    3. (permalink)
      Comment by BethLeppard
      On April 9, 2014 at 23:00

      THANK YOU! I was really overthinking this before I found your solution.

    4. 袚芯褉褟褖懈械 褌褍褉褘 胁 袝谐懈锌械褌,孝褍褉褑懈褞, 袨袗袝, 袣懈锌褉, 孝邪懈谢邪薪写, 袠薪写懈褞, 楔褉懈-袥邪薪泻褍, 袚褉械褑懈褞, 袠褋锌邪薪懈褞 懈 胁 写褉褍谐懈械 褋褌褉邪薪褘 锌芯 写芯褋褌褍锌薪褘屑 褑械薪邪屑 -褌褍褉邪谐械薪褋褌胁芯 TourShop

      mac nw35 foundation Set Out To Develop An Athletic Shoe That Would Feel More Natural And Weightless m3OibJElt4 | Incite Stories