- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Positioning
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:
- static—The 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.
- relative—When 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.
- absolute—Elements 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.
- fixed—Elements 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.