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


    3 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.