Absolute or relative - not physics, CSS positioning
Wednesday June 13, 2007
Trying to place something on a Web page is a lot harder than trying to find your position on a map.
The main reason for this is that maps provide positions of things that are static. A mountain doesn't change its location depending upon where you view it from or what other mountains are around it. But with Web pages, position can be defined statically or in relation to the elements around it. And in order to lay out your Web pages with CSS positioning, you have to first define which method you'll use - absolute or relative. But in order to do that, you should know what they mean.
Comments
I hate to criticise on pointless things, but there’s one bugbear I have with the web - nobody know when to use apostrophes. On this page, and in multiple places in the article, you use “it’s”, when it should be “its”:
“A mountain doesn’t change it’s location…”
“It’s” only applies when it’s short for “it is”.
Sorry to nitpick, but it kind of gets on my nerves when people do this. It’s like how no-one knows which there/their/they’re to use.
Otherwise, you’re doing a good job, and I really enjoy reading your articles - keep it up!
I don’t really consider corrections “criticism” - you’re pointing out an error, not criticizing. In this case it was a typo, as I do know the rules for its vs. it’s - I just wrote it quickly and didn’t re-read the post.
Perhaps it would be easier on yourself if you made the assumption that it was an innocent mistake. And not that “no-one knows which their/there/they’re to use.” After all, we’re all human, and everyone makes mistakes. And with auto-spellcheck it’s really easy to make this type of mistake without realizing it. After all, the word isn’t underlined.
If you had written “you suck, and can’t write good grammar if you were paid to” or something like that, I would consider it a criticism.
(And would probably delete the post as unnecessary flaming.)
There are some good tuturials for CSS layouts at the Dreamweaver Developer’s Center on the Adobe website.
Except where you need elements on thhe page to be able to overlap one another using the default position:static and positioning the elements using margins, padding, width, float, clear, and overflow is usually simpler than trying to use position. Most uses for position:absolute to overlap elements require that it be inside an element with position:relative so that the one can be positioned relative to the other rather than their moving completely independently when the page gets resized. There are still too many people using IE6 which doesn’t properly support position:fixed for that option to be as useful as it would otherwise be.
To get the most out of Absolute positioning you have to use Relative positioning as well. For me it’s not an either or, most projects I find myself using both.