CSS and the headache that is Absolute Positioning

We’ve all had that moment where we think we know where the absolute positioned div will end up, hit the F5 key and it’s disappeared and it’s somewhere that seems completely nonsensical. Absolute position can be a great tool for those speciality elements that need to overlay another image (think of a “On Sale” stamp).

Maybe you’ve worked with absolute positioning before and just can’t seem to get your head around why it works after you’ve copied a bit of code from stack overflow. The thing to remember is with absolute position that it is positioned relative to the first parent element that isn’t static. I know what you’re thinking “but it’s not position: relative”, I agree its confusing as all hell. The reason that your div might be randomly placed it because the first parent element it would come across is the HTML tag rather than the parent div you may desire.

The amount of times that I’ve completely lost my div by using left: -50% is pretty embarrassing really, making it fly off the left hand side of the page. Out comes the developer tools trying to bring the lost div back home to where it belongs.

I hope this helped a few people figuring out what happens with position: absolute. It really is one of those “ohhhhhhhhhhh yessssss, I get it” moments.

I’ve created an extremely simple JSFiddle for you to have a play around with and maybe understand it a little better: Fiddle.