The three articles this week are all helpful resources for understanding how to use CSS positioning in laying out page elements. The first, “Learn CSS Positioning in Ten Steps”, was a resource that was referred to a great deal by other articles on the web as being one of the best resources for learning positioning. It’s definitely going into my bookmarks – this tutorial puts simple definitions for each layout property directly side-by-side with a visual example of its use. Though none of the layouts are explained thoroughly, it’s a terrific cliff-notes introduction to the whole concept.
The second tutorial is very much like the first, but uses a different layout to show how each positioned element works within the “document flow”. Unlike the first tutorial that breaks up each layout example, the second tutorial throws them together on a single page. I prefer the first tutorial myself, but I thought someone else might prefer this second option. You do get a better sense of how these can all work together on the same page by being able to see all of the properties used simultaneously.
Finally, there’s the article “Absolute, Relative, Fixed Positioning: How Do They Differ?”. This is a good final article to read after absorbing the first two; though it doesn’t provide visual examples for the four major layout properties, the author provides a better “pro-and-con” analysis for their use.
A small complaint I had about the positioning resources I found was their lack of suggestions for how to apply these properties in real-world layouts. They did a great job of defining each layout and providing visual examples, but I wish they could have suggested some “best-use” scenarios. For example, saying something like “using relative positioning is often used to negotiate problems in multi-column layouts” or “absolute positioning can help you place dynamic images as backgrounds”. I know it’s greatly up to me to decide how to use these layout commands, but providing more suggested applications would be helpful in integrating them to my own website project.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
