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.

3 Comments

  1. 7 February 2006 at 5:10 pm | Permalink

    Not relevant to your post as such, but I wanted to try to return the favor since you rescued my latest blog entry and saved me a ton of work.

    A biological “Garden of Eden” has been discovered in New Guinea, including at least one bird species known only from early 19th century specimens — Berpsch’s six-wired bird of paradise (no picture, I’m afraid):

    http://news.independent.co.uk/environment/article343740.ece

    Thanks again for the help.

  2. 7 February 2006 at 6:08 pm | Permalink

    Here’s a link to the MSNBC story which includes a slide show with images of all the birds and other new/rare species.

    http://www.msnbc.msn.com/id/11114156/

  3. Harry
    7 February 2006 at 9:56 pm | Permalink

    Thanks Howard, that looks truly wonderful. Lucky bastards.

    I did think the caption on one of the MSNBC photos was a bit weird, where it describes the Long-beaked Echidna as “a mammal that looks like a sloth”. Some subeditor reaching beyond their area of expertise, methinks.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*