CSS Position

Stay There

CSS has the ability to place an element anywhere in a document or on a page. This which allows for a great deal of flexibility when it comes to page and website design. CSS elements can be placed in locations using the Position property.

The CSS position has several values:

Static. Absolute. Relative. Fixed. Float.

This allows placing an element anywhere in relation to another element or anywhere on the page.

Position: Static

A block in normal flow. Static is the normal value of position, even if none is stated. The element follows normal document flow.

Position: Absolute

A block element is moved entirely out of the normal flow and allows it to be positioned with measurements from top, bottom, right, left.

A box or block element is positioned in relation to its parent container, only if its parent has a default static value or no value set.

If a value is set for the parent div container, the position:absolute is set in relation to the upper most container, HTML.

Position: Fixed

A block element is moved out of the normal document flow and allows it to be positioned with measurements from top, bottom, right, left.

Fixed elements are always positioned in relation to the html element (visible area of the browser) top left hand corner and never in relation to its container box.

Fixed block elements will not move for page scroll.

Position: Float

A box is positioned to left or right of container box and taken out of normal flow. Content flows on side of floated box.

Position: Relative

Relative block elements are positioned in normal flow and moved with the page and text.  The block element is positioned with measurements from top, bottom, right, left in relation to its container or parent div.

Anything following will act as though the relative positioned element was still in normal flow.