I liked this article by Kilian Valkhof because it clearly explained the various options for displaying elements in CSS and was kind of humorous at the same time. Valkhof’s view of positioning in CSS is poignant; basically positioning in CSS is all about how elements on the page interact with one another; rather than the simply the element’s position on the page. I hadn’t thought of positioning in that way, but now it makes sense. Flow, as Valkhof explains, “The flow in CSS is the logical way in which elements get placed on your screen.” This is a logical explanation to me. Here are the various CSS positioning styles Valkhof discusses:

  • Static: Displays the content as normal flow- offsetting does not work here
  • Relative: Similar to static, but allows for offsetting (moves an object relative to its normal position)
  • Absolute: This is very different from the first two, in that Absolute is not part of the normal flow of the document- it is placed in specific position
  • Fixed: Fixed position is similar to Absolute, instead the element is positioned relative to the browser position (which, as Valkhof explains, is not supported by Internet Explorer)
  • Z-index: This is one I had never heard of before. With this function, you can control which different type of positioned element is on top (kind of similar to the concept of stacking)

Valkhof described things in this article clearly and introduced some topics I had not even heard of.

Another good article I ran across was one from Peachpit.com written by Molly E. Holzschlag. I know Peachpit writes some great books on web/graphic design, so I thought this would be a great place to look. This article went into a little bit more depth about each type of basic positioning scheme in CSS and explained the difference between them in plain words.

First, Holzschlag describes what the default behavior of the browser is, “Normal flow is when… Each block level element is stacked on the next, with inline elements flowing into the available space.” Then she defines what each of the basic positioning schemes does. I like that she explained that you rarely see the “Static” positioning scheme used because it is the default positioning of the browser. I also like that the author uses actual HTML/CSS examples to show the differences between the positions.

Finally, Holzschlag discusses the floating property in CSS. She makes it clear that floating is not a positioning schemem, but rather, “floating is often used along with positioning to create floating boxes within a design. Floating boxes are in the normal flow and therefore cannot be manipulated in the same way as positioned boxes.” I hadn’t really thought about that distinction in that way, which made me glad that I read this article.