Cascading Style Sheets/Positioning

From WikiKnowledge

The position property allows you to control the position of elements. The position property has five possable values:

[edit] Static

This is the default way elements are positioned. With this positioning, elements appear on the page in the order they appear in the HTML/XML document. Statically positioned elements are not effected by any of the offset properties (top, bottom, left, right).

[edit] Relative

By default, a relatively positioned element is positioned exactly the same as a statically positioned element. However you can use the four offset properties to move a relatively positioned element. For example, to move all paragraphs left by 20 pixels you can use this code:

p { position:relative;
  left: 20px;}

The second paragraph has been moved to the right by 20 pixels, and goes off screen.

Note that while this is similar to setting a margin-left of 20 pixels, relative positioning will not make the element smaller. The element will be the same size it would have been normally, but is literally moved left.

Another important effect of setting the positioning of an element to relative is that all of its child elements with a position of absolute will be positioned relative to this element.

[edit] Absolute

Absolute positioning will take an element completely out of the document flow, however it allows you to place it anywhere on the page you wish, regardless of where it is in the original document. To position the element you will need to use the Offset properties to tell the browser where to place it.

[edit] Fixed

Fixed positioning is similar to absolute positioning, except an element with fixed positioning will remain in place even as the page is scrolled. This is useful fo navigation menus, so that the menu is always visible as the user scrols the page. This setting is not supported by Internet Explorer.

[edit] Offset properties

There are four offset properties available in CSS, they are top, bottom, left and right. Each property can have the following values:

The offset properties are used with other position properties to tell a web browser where to position elements. For example, you can place an element with the id "nav" in the top left of a web page using these CSS rules:

#nav {position: absolute;
      top: 0;
      left: 0;}

If you provide both a top and bottom then a height is implied, and if you give a left and right then a width is implied.

[edit] z-index

The z-index property controls how elements on a page are layered. If two blocks of text are placed in the same place on a web page then only one can be shown. The other block will be hidden underneath. The z-index property determines which block of text is on top, and gets shown on the screen while the other one is hidden behind.

The picture on the right shows the effect of the z-index property. In left group, block 4 is displayed on top. This is the normal behavior, while in the right group; block 1 is displayed on top. The group on the right has had the z-index property set. Block 1 has a z-index of 4, while block 4 was given a z-index of 1. The block with the highest z-index is shown on top, and the lowest is shown underneath.

[edit] Navigation