Call Customer Support
1.866.363.5633
CSS Tutorials
- What is CSS?
- How do we use CSS?
- Three Types of CSS
- Style Declaration
- CSS Selectors
- CSS Position Property
Video Tutorials
CSS & HTML Tutorials
Training DVDs & Products
Expression Web 3 Tutorials
CSS Position Property
The CSS Position Property can be assigned one of 4 different Values:
- 1. Static
- 2. Absolute
- 3. Relative
- 4. Fixed
Static Positioning
A Static Element will assume a position in the Normal Flow of the page. You cannot assign top - bottom - right - left values as a static element will just ignore them. Instead, the way we position static elements includes the use of floats, margins, and negative margins. We can also assign a width and/or a height to a static element.
Example: Every div used to make this web page you are looking at is Static. The Left Column is floated left. Yet, not assigned a CSS position property. The remaining position properties alter an elements position in the normal flow in some way.
The default position property for many page elements, such as a <div>, happens to be "Static". (Since static is the default, we don't have to actually specify 'static' for the position property as it is assumed.)

When would you use Static Positioning?
Use Static Positioning along with Floats to create the Layout. This is not the only way to create a CSS layout, but it is a tad better than other methods
Normal Flow of the Page refers to the top to bottom flow of page elements. This normal flow of a page in which elements flow top to bottom refers to Block Level Elements.
For instance, a div is a block level element by default. So when you place a div on a web page, it runs across the entire width of the page, or the entire width of the parent element in which a div may be nested. If you do not assign a specific width to the div, it will continue to extend the entire width of the parent element. This is really what we want to happen as the div will fit nicely inside the parent div, and avoids overflowing the parent div...usually.
Absolute Positoning
An example of absolute positioning is a Layer.
An element whose position property is set to absolute is removed from the normal flow of the page. In other words, the element acts as if there are no other elements on the page. Thus, an absolute element often times covers up other elements.
Furthermore, absolute elements are positioned relative to the top and left edge of a page, and not relative to a containing box or other elements on the page.
Absolute elements can also be stacked, or layered, on top of each other. Just use the z-index to modify the stacking order of each element. The higher the z-index, the higher in the stack an element will be.