Site hosted by Angelfire.com: Build your free website today!

CSS Positioning Principles and Examples

You know how in XHTML you can use an attribute and a value to identify a particular element.

For example:

<div id="This will be a black box containing text">This is the text that would appear in the div block.</div>

You also know that with CSS you can define a style for a particular element.

For example:

<style type="text/css"> p { color:heather; font-size:18px; } </style>

What CSS positioning does is apply a number of visual characteristics to two very special XHTML attributes "id" and "class."

Once the styles are defined in the CSS, then whenever that particular attribute is put inside an XHTML block element, such as:

  • H1-H6
  • div
  • p
  • blockquote
  • ul
  • ol
  • table
the styles will be applied to that element. In addition to changing the look or color of text, CSS can also add a background color, image, or even height and width dimensions to the chosen element.

The "positioning" aspect of CSS comes when you use a CSS property and value to set starting point on the screen in a browser from which the element will be moved.
For example:

<style type="text/css"> p { position: absolute; left: 0px; top:400px; height: 200px; width: 400px; background-color: tan; } </style>

In addition to "absolute" there are a number of other options

Position Values How it Positions
Absolute You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom.
Static You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom.
Static You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom.
Relative You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom.
Fixed You can set how far the block will move from one of the edges of the browser, such as left, top, right, or bottom.

This is your main content section.

You should delete all of this text and replace it with text of your own. You can modify any text on your page with the Text formatting tools at the top of the page. To add other content, use the Media and Add-ons tabs. If you'd like to change your style template click on Styles. To add or remove pages use the Pages tab.