How would you explain CSS positioning to a human being?

Question

fellow earthians.

I, relatively sane of body and mind, hereby give up understanding CSS positioning by myself.

The online resources about CSS go to great length to explain that the "color" attribute lets you set the "color" of stuff. Unmöglish.

Then, that if you want to put something to the left of something else (crazy idea, right?), all you have to do is to set it to float to the left provided you set the "relative" flag on its parent block which has to have a grand-father node with the "absolute" flag set to true so that it's positionned relatively to an other container that may-or-not contain anything, have a position, a size, or not, depending on the browser, the size of other stuff, and possibly the phases of the moon. (CSS experts are advised not to take the previous paragraph seriously. I'm pretty sure someone will point out that my rant is not valid, or w3c-compliant - and that it only applies to the swedish beta version of IE6)

Joking apart, I'm looking for any resource that explains the root causes of all the crazyness behind layout in CSS. In essence, something that would be to CSS what Crockford's articles are to Javascript.

In this spirit, let me point out that I'm not looking for css libraries or grid frameworks like blueprint, or for CSS extension languages like lesscss. I've been using those to ease my sufferings, but I'm afraid it would be like telling someone to "just use jQuery" when they say they can't wrap their mind around prototype inheritence in JS.

If all you can point me to is http://shop.oreilly.com/product/9781565926226.do , I guess I'll consider myself doomed.

Thanks in advance.

EDIT : I probably should not have talked about "positioning" (thanks to all who've explained again that 'position:relative' does not mean 'relative to your container' and that 'position:absolute' means relative to something. I've never been so close to making a monty python script out of a SO questions). I think I meant layout in general (positioning + floats + baselines + all the nonsense required to put stuff on a straight line).

Also please excuse the ranting tone, I'm trying to pour some humour into frustration. I would use zen techniques to calm down if I could, but this only reminds me of this.

Answer 1

These two courses from code academy should explain CSS positioning well:

First, Second.

Answer 2

It seems most others have not quite understood the gist of your post. I'll break it down for you:

CSS positiong is complex because it was designed by many different groups of people over a long period of time, with various versions, and legacy compatibility issues.

The first attempts were to keep things simple. Just provide basic styling. Colors, fonts, sizes, magins, etc.. They added floats to provide the basic "cutout" functionality where text wraps around an image. Float was not intended to be used as a major layout feature as it currently is used.

But people were not happy with that. They wanted columns, and grids, boxes, and shadows, and rounded corners, and all kinds of other stuff, which was added in various stages. All while trying to maintain compatibility with previous bad implementations.

HTML has suffered from two opposing factions warring it out. One side wanted simple (compared to existing SGML anyways) solutions, another side wanted rich applications. So CSS has this sort of schitzophrenic nature to it sometimes.

What's more, features were extended to do things they weren't initially intended to do. This made the existing implementations all very buggy.

So what does that mean for you, a mere human? It means you are stuck dealing with everyone elses dirty laundry. It means you have to deal with decade old implementation bugs. It means you either have to write different CSS for different browsers, or you have to limit yourself to a common "well supported" featureset, which means you can't take full advantage of what the latest CSS can do (nor can you use the features there were designed to add some sanity to the standard).

In my opinion, there is no better book for a "mere human" to undrstand CSS than this:

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

It's simple, concise, and gives you real world examples in a glossy "easy on the eyes" format, and lacking most of the nasty technical jargon. It is 10 years old, and doesn't cover any of the new stuff, but it should allow you to "grok" the way things work.

Answer 3

There's more to the positioning that just the position property. You need to understand how floats work as well.

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

These two articles should get you going.

Read a bit on display properties as well, since they're likely to be one of the problematic areas in any given html/css.

Answer 4

Have you checked out this great book? http://shop.oreilly.com/product/9781565926226.do

just kidding.

I don't think you need an entire resource devoted to this one question. It's rather simple once it clicks.

Think of CSS positioning as a way to position items either relatively to themsevels (wherever they fall on the page) or absolutely from on an X/Y coordinate.

You can position something relative and it will either move up or to the right with a positive number, or down and to the left with a negative number.

If you position an element absolutely it will remove itself from the layout altogether (the other elements will not recognize it as being on the screen) and then do one of two things. It will either:

1 - position itself from the top left of the page and either go up/down right/left as I mentioned before depending on whether the numbers are +/-.

2- if the PARENT element is either positioned absolute or relative it will position itself from the top left "corner" of the parent element, NOT the browser window.

Think of z-index as layers in photoshop. With 0 being the bottom (and newer browsers recognize negative z index for even more fun). and 100 as the top later (newer browsers recognize an infinite amount of numbers). The z-index only works with position: relative and absolute.

So if I position something absolute, and it happens to fall underneath another element, I can give it z-index: 100 and it will position itself on top. Keep in mind that the element itself is a rectangle, and the height/width of the element may inhibit you from clicking on the element beneath. You can't do angles,circles, etc. with pure CSS.

Does that help?

Answer 5

Positioning is easy to understand:

relative positioning -- Render the page exactly as your normally would. Once done, anything with relative positioning gets moved, relative to where it initially was. Nothing else is affected.

absolute positioning -- Removes the item from the page flow. Other things render as if this weren't there, i.e. they fill in the space that this item took up. They are now positioned absolutely to the nearest element with position: relative OR position: absolute set. In many cases this means they are positioned absolute to the body tag.

You then position things with top, right, bottom and left in CSS.

If something has absolute positioning set:

• positioned relative to the top left of the page when using top and left. Positioned relative to the bottom right of the page when using bottom and right.

• its width/height can be controlled with a combination of top / bottom or left / right, e.g.: top: 100px; bottom: 100px will make an item that is 100% - 200px of its parent's height (unless you specify a height too in which case top and height are used and bottom is ignored).

Answer 6

this link is mainly about z-index but IMO it does a pretty good job of explaining how things are positioned on a page

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

This link is more focused on positioning but it is important to understand the z axis in order to understand the rest of the positioning puzzle

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/