Real Kato Blog: CSS Irritation

Who out there is a web designer? Maybe you can relate to this statement: whoever wrote the spec for CSS DIV positioning should be shot.

For those of you who aren't web designers, a DIV on a web page defines a box. In the cascading style sheet (CSS) for the web page, you can define where on the web page that box is supposed to appear. With me so far?

There are four ways you can define a box's position: static, absolute, relative, and fixed. The reason I say the spec writers should be shot is because "static" actually means "dynamic", "absolute" means "relative", "relative" means "offset", and "fixed" means "floating".

See?

Let me explain. "Static" means the box should appear in the flow along with other web content. So that's not static at all; it can change dynamically depending on the size and style of other content. "Absolute" means the box should appear at a position relative to the nearest positioned box (either a containing DIV, or the web page). "Relative" is like "static", but the box is moved by a defined offset from where it would normally appear. And "fixed" means when the web page moves, the box still appears at the same position on your screen (so it appears to float... this is how a lot of pop-up ads are done nowadays).

With regards to "absolute", there's another irritation. Normally when you define a position for a DIV, you put a "position:" attribute in the style definition for that DIV, and that's it. But when it comes to "absolute", that makes the box's position dependent on its own position attribute as well as the position attribute of the containing (parent) DIV. If none of the containing DIVs has a position (or if they're defined to be "static"), the box is positioned relative to the web page. If a containing DIV does have a position, the box is positioned relative to it.

Confused yet? See, this is why I'm so irritated. If I were writing the spec, I would define four position types: "inline", "parent", "page", and "window", and make them mean exactly what they say.

An excellent article on this topic is available on Austistic Cuckoo.

Permalink