HTML and CSS Reference
position is another property that affects the flow of a document. The values that can be used are static and
relative , which affect the normal flow, and fixed and absolute , which take elements out of flow.
The CSS3 Positioned layout module found at www.w3.org/TR/css3-positioning/ introduces
two new values, center and page , but unfortunately they are yet to be implemented into any browsers, so it is too
early to cover them.
You can use the position declaration in conjunction with the properties top , right , bottom , and left (ex-
cept for when using position: static; ), which allow you to change the position of an element. How these
properties relate to the position of an element is determined based on the value of the position declaration.
You can give top , right , bottom , and left any type of value such as percentages, pixels, or ems.
Elements are position: static; by default. A static element is a normal box laid out in the normal flow. Stat-
ic elements aren't affected by the top , right , bottom , and left properties.
When you make an element position: relative; , it too is laid out in the normal flow of a docu-
ment—known as the “normal position.” From its normal position, you can then offset the position of an element rel-
ative to its normal position using the top , right , bottom , and left properties. The elements following a relat-
ive element are affected based on the normal position of that element; its relative position doesn't affect layout.
Assume you would like to change the position of the <h1> page title on the Cool Shoes & Socks page. In Figure
9-10, you can see the page title is static and in flow, meaning the <p> elements and <img> below it are placed be-
If you give <h1> the declaration position: relative; , the page appears exactly the same as when that ele-
ment is position: static; . However, a relative element can be manipulated with top , right , bottom,
and left .