InterACT with Web Standards: Positioning
This chapter is from the book
This chapter is from the book
This chapter is from the book
by Chris Mills
Having conquered the menaces of floats and clearing in the last chapter, we will now turn our attention to the second advanced layout-related topic you should be familiarising yourself with: positioning. This feature of CSS allows you to take elements out of the normal document flow (i.e., where they are placed by default before any CSS is applied to them) and shift them left, right, up and down, putting them somewhere else entirely. This is useful for a variety of layout purposes, such as multiple column layouts, putting captions on photographs, keeping a feature such as a menu or heading in the same position on the screen regardless of how much the browser is scrolled, and more.
In this chapter, we will look at practical examples of such techniques while exploring positioning.
In this chapter you have the opportunity to try it yourself with the convenient sample code downloads found on the book’s companion website—http://interactwithwebstandards.com.
Positioning basics
There are four types of positioning:
- static: The default if no positioning is applied—this simply lays out the element as normal, in the document flow. We therefore don’t need to discuss this one much further. You’d use this value to override positioning that has been set earlier in your style sheet.
- relative: This places the element where it would normally sit in the document flow, but then positions it somewhere else—relative to its normal position—depending on the movement values you give it.
- absolute: This takes the element completely out of the document flow (so elements above and below it will appear next to one another as if the positioned element didn’t exist), and then positions it relative to the sides of the closest positioned ancestor element (parent, parent’s parent, etc.). This is normally the <body> element, although as you’ll see later you can set it to anything you want.
- fixed: This takes the element completely out of the document flow, just like absolute positioning, but instead of being positioned relative to the nearest positioned ancestor element, it is positioned relative to the browser window itself, meaning that the element will always stay in the same position on screen, no matter how much you scroll the contents.
The way you apply positioning is simple. You use the position property on the element you want to position:
img {
position: relative;
}
You then use the left, right, top and bottom properties to specify where you want to position it:
img {
position: relative;
left: 150px;
top: 150px;
}
With relative positioning, the values specify how far away the element should be placed from the left and top edges of the element’s original position. (The other types work in a slightly different way, as you’ll see below.) The effect is something like Figure 21.1.
)
Figure 21.1: A simple example of what relative positioning does, with the original position of the element illustrated for clarity.
With the basics covered, let’s look at each type of positioning in turn.