CSS Tutorials

 

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.)

css positioning properties

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. 

Delicious Bookmark this on Delicious

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.