Disclaimer: Check the date! This post was written way back in 2008. If there are technical things in here, they may be outdated, or there may be better ways to do them by now. You've been warned.
While there’s no substitute for learning something by first making all of the mistakes, it doesn’t hurt to learn from somebody else’s. In today’s issue, we’re going to talk about absolute positioning.
The element’s box is laid out in relation to its containing block, and is entirely removed from the normal flow of the document. The containing block of the absolutely positioned element is the nearest ancestor element with a
static. If no such ancestor exists, then the containing block is the root element of the document.
-Eric A. Meyer. Cascading Style Sheets 2.0 Programmer’s Reference. California: Osborne/McGraw-Hill, 2001.
In truth, the solution was in front of my face the entire time, I just never understood
it! (Or possibly I just skimmed the paragraph and only read the first sentence, but
that’s a different issue altogether!) The problem I was seeing was that my absolutely
position: absolute; top: 0; left: 0;) element was appearing in
the upper left of the viewport, not the upper left of its containing element.
The simple solution was just to set the
position property of my containing
This is a valid solution because a
positioned element behaves exactly like a
statically positioned element, except
that the position properties (
left) are used to offset
the element by the specified amount. So, as long as the position properties are left
with their default values, to make a container element, all you need is