Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book


As we'll see in Chapter 9, float has become the principal way of creating many page layouts with CSS, but the CSS positioning properties, introduced in an interim "CSS Positioning" specification and included in CSS2, were designed to enable sophisticated page layout with CSS. They are still used for this purpose, often in conjunction with float and clear. For now, I'll provide a brief overview of the properties and concepts, and we cover them in much greater detail later in the book.

The position Property and Positioning Schemes

The position property takes one of four keywords, each of which specifies a different way of placing the element on a page:

  • staticThe default position value, position: static, specifies that the element be laid out in the normal flow of the document. The rules for how a browser lays out elements in the flow are complicated, but they should be very familiar, at least intuitively, to anyone who has used the web extensively.
  • relativeWhen an element is positioned with a relative value, it is first laid out as it would be in the flow, then moved from that position according to its top and left values (and less commonly bottom and right values). When the element is moved relative to its place in the flow, very importantly the normal flow of the document doesn't change.
  • absoluteElements with a position: absolute are taken completely out of the flow of the document and then positioned with respect to the top and left of the first element that contains it that also has a position of absolute, relative, or fixed. Because the element is taken out of the flow, the rest of the page is flowed as if the element was not present in the document.
  • fixedElements with a position: fixed are positioned very similarly to those with a position: absolute. They are taken out of the flow of the document and then positioned according to their top and left property values always with respect to the window they are in. This means that when the page is scrolled, the element remains exactly where it is with respect to the window.

While these concepts may sound a bit daunting, they are very logical. As mentioned, we revisit them in considerable practical detail in Chapter 9, so we won't belabor them here.

top and bottom, left and right

With the exception of position: static, the other values of position are typically used in conjunction with the properties top and left, and—to a lesser extent—bottom and right to place the element on the page. These properties work in slightly different ways, depending on the value of the position property:

  • For static, they have no effect.
  • For relative, a positive top value moves the element down the page from where it would otherwise be placed; a negative top value moves it up the page from where it would otherwise be placed. Similarly, positive left values move the element to the right, and negative to the left of where they would otherwise be. bottom and right work in the reverse.
  • For absolute, the effect is similar to relative, but in this case, the element is moved with respect to not where it would otherwise be in the flow, but with respect to the top and left of the first element that contains it that also has a relative, absolute, or fixed position value (such elements are said to have a positioning context). This will often be the body element.
  • For fixed, again the effect of the top and other properties are similar, but in this case move the element with respect to the top and left of the window itself (inside all the browser controls, or chrome).

Mastering positioning takes time, so don't feel you should be able to digest and use all of the information in this section immediately. More important than the actual properties and their values are the techniques we can implement with them, which is what Chapter 9 is about.

  • + Share This
  • 🔖 Save To Your Account