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>

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>

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>

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.