Introduction to CSS Positioning Properties Part 1 - CSS 2 Positioning Schemes
(Page 4 of 6 )
For the CSS2 specification, there are five styles of positioning for HTML elements. They are as follows:
Static Positioning: Static positioned elements will be displayed flowing in the normal rendering sequence of the <body> content. It’s the default behavior for HTML elements. The "top" and "left" properties are not applicable, as we’ll see in a moment.
Relative Positioning: Relatively positioned elements are positioned according to the normal flow and then moved. Elements that are rendered after a relatively-positioned element behave as if the relatively-positioned element was in its "normal flow" position, even if this means they occupy the same screen space.
Absolute Positioning: Absolutely-positioned elements are not affected by normal flow. They’re positioned by specifying the "top," "left," "right" and "bottom" properties. The element remains located in the document at the specified coordinates. However, it will scroll along with the window or ViewPort.
Fixed Positioning: Fixed-position elements work in the same way as absolutely-positioned elements, except that their position is relative to the ViewPort. As such, they don’t move if the page is scrolled -- they stay relative to the Viewport. Also, the "top," "left," "right" and "bottom" properties are applicable.
Float Positioning: Elements positioned using the "float" property are positioned using the normal rendering flow and then moved left or right as far as they can go, according to the value assigned to the "float" property, whether is left or right. Elements that appear after them will move up to fill any gap left behind, but will flow around the box, so they won’t be displayed at the same screen position.
Having defined the five styles to position elements, we should apply them using the "position" property in the following manner. We’ll see how it can be done in the next section.
Next: The "position" property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 8 
