www.Expression-web-3.com

• Home
• Quick Start
  • Checklist Overview
  • 1. Set up Web Site
  • 2. Set the Doctype
  • 3. Make Web Page
  • 4. Make External Style Sheet
  • 5. Style Application Mode
  • 6. Designing the Web Page
  • 7. Dynamic Web Template
• CSS Basics
  • What is CSS?
  • Position Properties
  • Style Declaration
  • 3 Types of CSS Styles
  • CSS Selectors
  • Creating CSS Styles
  • Style Builder
  • Center web page
  • CSS How To's
• HTML Basics
  • What is HTML
  • HTML 5 ?
  • The Doctype
  • Box Generation
  • HTML Tags
  • Page Properties
• Making Layouts
  • PreMade Layouts
  • Layout from Scratch
  • Layout Downloads
• Video Tutorials
  • Getting Started
  • Drop-Down Menu
  • Form Tutorial
  • Expression Design 3
  • Other Videos
• Products
  • Training DVDs
  • Online Class
  • 1 to 1 Coaching

CSS Tutorials

• What is CSS?
• How do we use CSS?
• Three Types of CSS
• Style Declaration
• CSS Selectors
• CSS Position Property

 

Video Tutorials

• Getting Started Videos
• Contact Form Videos
• Expression Design 3 Videos
•   

CSS & HTML Tutorials

• All About CSS
• HTML Overview
•  FAQs

 Training DVDs & Products

• DVD Sets
• Online Class

 

 

 

 

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. 

You can watch a video that discusses the Normal Flow of the Page.

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. 

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.

Other Properties used with Absolute Positioning

When we position a layer, we would use the following properties which are located in the Position Category of the Style Builder:

• top:  used to specify the amount of space placed between the top edge of the browser (or #container if the position property is set to "relative") and the top edge of the Layer (absolute positioned div)
• right: used to specify the amount of space placed between the right edge of the browser (or #container) and the right edge of the Layer.
• bottom: used to specify the amount of space between the bottom edge of the browser (or #container) and the bottom of the Layer.
• left:  used to specify the amount of space between the bottom edge of the browser (or #container) and the bottom of the Layer.

Look at the Position Category above.  Notice the top, right, bottom, and left properties.  These properties can be used to position Layers or any 'absolute' positioned element, or a Fixed element.

But, a Static div will ignore the top, right, bottom, and left values. 

Fixed Positioning

 

 

Relative Positioning

Relative positioning is usually used to create a new point of reference for positioning a Layer or Absolute div.

For instance, if your layout consists of a container, and everything is nested within the container, you could make the position property 'Relative' on the #container.  Then add a layer and you will position it relative to the container.