Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

The position property changes how element are positioned on the web page.

JavaScript Switch Statement

You should use the switch statement if you want to select one of many blocks of code to be executed.

The Code

position: value;

Values

Static

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static as doing so is no different than not declaring it at all.

Relative

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

The Code

position: relative;

Absolute

Positioning an element absolutely, removes the element from the normal flow of the (X)HTML file and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be position from the top left of the browser window.

The Code

position: absolute;

Fixed

Positioning an element with the fixed value is the same as absolute except the parent element is always the browser window. It makes no different if the fixed element is nested inside other positioned elements.

An element that is positioned with a fixed value will not scroll with the document. It will remain in its position regardless of the scroll position of the page.

The Code

position: fixed;

When positioning elements with relative, absolute or fixed values the following properties are used to offset the element:

For example,

The Code

position: absolute; top: 10px; right: 10px;

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)