CSS position Property

CSS position property specifies the how an element is positioned.

Usages

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

Default value:	static
Applies to:	All elements
Inherited:	No
Version:	CSS2
JavaScript Syntax:	object.style.position = "absolute"

Syntax

Here is a syntax for the CSS position property

position: static | relative | absolute | fixed | initial | inherit;

Property Values

The following table describes the values of this property.

Value	Description
static	Default. Elements render in normal flow, as they appear in the document flow
relative	The element is positioned relative to its normal position
absolute	The element is positioned relative to it's first ancestor element whose position value is any other than static
fixed	The element is fixed with respect to the screen view-port and does not move when scroll
initial	Sets default value of this property
inherit	Inherits this property from its parent element

Examples

The example below shows to sets position property.

CSS position:relative property

CSS position:relative property set element relatively followed by the relative offset from top, right, bottom or left.

Relative position is related to each and every around element properties (like margin, background-color and so forth).

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="position: relative; left: 120px; background-color: orange; width: 120px;">
    This element is a relative positioning for each elements.
  </div>
</body>
</html>

Run it... »

CSS position:absolute property

CSS position:absolute property set element absolutely followed by the absolute offset from top, right, bottom or left.

Relative positioning element inside you can set absolute position element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="position: relative; width: 400px; height: 150px; border: 1px solid orange;">
    <div style="position: absolute; top: 35px; left: 220px; width: 160px; background-color: orange;">This element is a absolute positioning for each elements.</div>
  </div>
</body>
</html>

Run it... »

CSS position:fixed property

CSS position:fixed property set element in fixed, even if window scroll vertically or horizontally element is fixed place.

CSS position fixed followed by the window offset top, right, bottom,left.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="width:400px; height:150px; border: 1px solid orange; overflow: scroll;">
    <div style="position: fixed; top: 35px; left: 220px; width: 100px; background-color: orange;">Fixed element</div>

    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).<br />
    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).<br />
    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).
  </div>
</body>
</html>

Run it... »

Browser Compatibility

Google Chrome 1+
Mozilla Firefox 1+
Internet Explorer 4+
Opera 7+
Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.