CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS position Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The position CSS property specifies how an element is positioned.

The following table summarizes the usages context and the version history of this property.

Default value: static
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3

Tip: Elements with a position other than static are said to be positioned. Their vertical placement in the stacking context is determined by the z-index property.


Syntax

The syntax of the property is given with:

position static | relative | absolute | fixed | sticky | initial | inherit

The example below shows the position property in action.

h1 {
    position: absolute;
    top: 100px;
    left: 150px;
}

Note: In the case of print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a 'print-preview' — for example).


Property Values

The following table describes the values of this property.

Value Description
static The element's box is a normal box, laid out according to the normal flow. The top, right, bottom, left, and z-index properties are ignored for static boxes. This is default value.
relative The element is positioned relative to its normal position (this is called the position in normal flow).
absolute The element is positioned relative to its first ancestor element whose position value is other than static.
fixed The element is fixed with respect to the screen's viewport and doesn't move when scrolled. When printing, the element is printed on every page.
sticky The element is positioned similarly to a relatively positioned box and it "sticks" to its nearest ancestor that has a "scrolling mechanism".
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element position property.

Browser Compatibility

The position property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Position, CSS Layers.

Related properties: top, right, bottom, left, z-index.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties