!	In order to access this site, you need to enable Javascript.

You are here: Reference > CSS > properties > position

position property

A A

Font size

Browser support:

Specifies what type of positioning method is used to render the current element.

The default positioning is static, in which case elements are rendered in the order they appear in the document flow. The left, top, right and bottom style properties have no effect on static elements, their width and height can be modified.

Relative positioning is similar to static positioning, but the placement of relative positioned elements can be modified with the left, top, right and bottom style properties. In this case, the values of the left, top, right and bottom style properties are relative to the element's normal flow (static) position.

There are two other positioning methods that are often used, the absolute and the fixed. The left, top, right and bottom style properties affect both absolute and fixed positioned elements similarly to relative positioned elements, but the placement of references are different.
The placement of fixed positioned elements is always relative to the browser window's client area, so scrolling the document or an element in the document does not modify the placement of fixed positioned elements.
The placement of an absolute positioned element is relative to its first positioned (relative, fixed or absolute) ancestor element. If no positioned parent element exists, the placement is relative to the document. In contrast to fixed positioning, scrolling affects absolute positioning.

If you want to use this element dynamically, visit the JavaScript page for this property: position. You can find other example(s) there.

Possible values:

One of the following values:

absolute

The element is positioned relative to its first positioned (relative, fixed or absolute) ancestor element.

fixed

The element is positioned relative to the browser window's client area.

inherit

Takes the value of this property from the computed style of the parent element.

relative

The element is offset relative to its normal flow (static) position.

static

Default. Elements are rendered in order, as they appear in the document flow.

Default: static.

Internet Explorer does not support fixed position before version 7.
In Internet Explorer 7, fixed position is only supported in STRICT and XHTML document type declarations.
From Internet Explorer 8, fixed position is supported in all document type declarations.
For a detailed description of document types, see the page for the !DOCTYPE element.

Example HTML code 1:

This example illustrates the use of the position property for absolutely positioned elements:

<head>
    <style>
        .lefttop {
            position: absolute;
            left: 100px;
            top: 100px;
            color: red;
        }
        .righttop {
            position: absolute;
            left: 200px;
            top: 100px;
            color: red;
        }
        .leftbottom {
            position: absolute;
            left: 100px;
            top: 200px;
            color: red;
        }
        .rightbottom {
            position: absolute;
            left: 200px;
            top: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="lefttop">(100,100)</span>
    <span class="righttop">(200,200)</span>
    <span class="leftbottom">(100,200)</span>
    <span class="rightbottom">(200,200)</span>
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the position property for fixed positioned elements:

<head>
    <style>
        .lefttop {
            position: fixed;
            left: 100px;
            top: 100px;
            color: red;
        }
        .righttop {
            position: fixed;
            left: 200px;
            top: 100px;
            color: red;
        }
        .leftbottom {
            position: fixed;
            left: 100px;
            top: 200px;
            color: red;
        }
        .rightbottom {
            position: fixed;
            left: 200px;
            top: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="lefttop">(100,100)</span>
    <span class="righttop">(200,200)</span>
    <span class="leftbottom">(100,200)</span>
    <span class="rightbottom">(200,200)</span>
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
    Try to scroll!<br /><br /><br /><br /><br />
</body>