CSS positioning

[Sorry, I know most of you won’t be even slightly interested in this]

I’ve just had a major intellectual breakthrough about how CSS positioning works. Or, to put it another way, I’ve just realised that I’ve been being very stupid for a very long time.

I’ve read lots and lots of online CSS tutorials, and either none of them made it clear, or I was being dense. They often suggest that ‘absolute’ positioning is measured from the containing block – or sometimes they say that it’s measured from the edge of the browser window. The containing block theory clearly didn’t work. The screen approach seemed to work most of the time, but it meant that you couldn’t, for example, center the page on the screen if you were using absolute positioning – because it would always be a fixed distance from one of the window-edges.

In fact, absolute positions are measured from the nearest containing block in the hierarchy which has a ‘position’ property specified as something other than static. So if you just set the page’s ‘position’ tag to ‘relative’, you can then move the page around as much as you want and all things you’ve positioned with ‘absolute’ measurements will follow it. Similarly, you can take one area of the page and set it to {position:relative} and then use absolute positioning within that area.

I assumed, you see, that you’d only set the position property if you wanted to change the position of the block in question, not as a way of affecting the blocks contained within it. Now I know better. The CSS positioning system is suddenly much easier to use and much saner. I can’t believe I’ve been struggling along trying to design table-free webpages without grasping this; and I can’t believe that none of the tutorials I read made it clearer, since it’s the single most important thing to understand if you want to use CSS positioning.