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

position style property

A A

Font size

Browser support:

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

The 'relative' position is useful if you want to insert the element at the normal (static) position with some offset, use 'absolute' positioning if you want to insert the element at a custom position on the page.

An absolutely positioned element is relative to its offsetParent element (the first positioned (absolute, relative or fixed) parent or the body element).

Internet Explorer supports 'fixed' position only in STRICT and XHTML !DOCTYPE declaration and from version 7. For a detailed description of document types, see the page for the doctype element.

Use the left, top, right and bottom properties to specify the position for an 'absolute', 'fixed', or 'relative' positioned element.

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 element: position

Possible values:

The type of this property is string.

One of the following values:

absolute

Object is positioned relative to the position of its parent element.

fixed

Object is positioned relative to parent element's position, and does not move when scrolled.

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.

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>

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:

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

            // Returns the selected option value
            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 onClick="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>