Smokes your problems, coughs fresh air.

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 {:; }

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

  1. Naved Ahmed

    Thanks a lot Rowan. 🙂

  2. Rowan Rodrik

    Glad to have been of service, Naved. 🙂

  3. BethLeppard

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

© 2024 BigSmoke

Theme by Anders NorenUp ↑