In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > position

position style property

Browser support:

Specifies or returns 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 need to get the closest ancestor element in the DOM hierarchy from which the position of an element is calculated, use the offsetParent property.

Syntax:

object.position;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: position

Possible values:

The type of this property is string.

One of the following values:

absolute

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

fixed

7

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: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .rightbottom {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lefttop"></div>
    <div class="rightbottom"></div>

    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<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: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .rightbottom {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lefttop"></div>
    <div class="rightbottom"></div>

    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the position property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangePosition (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var posValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.position = posValue;
        }
    </script>
</head>
<body>
    <a>An anchor element before the sample division.</a>
    <div id="myDiv" style="top: 80px;left: 120px;">
        Change this element's position type
    </div>

    <select onchange="ChangePosition (this);" size="4">
        <option />absolute
        <option />fixed
        <option selected="selected" />static
        <option />relative
    </select>

    <br /><br />
    If you set the position to fixed, scroll the page to see it in action.
    <br /><br /><br /><br />
</body>