HTML - DOM Style Object position Property

Quiz

HTML DOM Style Object position property sets or returns the type of positioning method used on any element.

Syntax

Set the position property:

object.style.position= "static | absolute | fixed | relative | sticky | initial | inherit";

Get the position property:

object.style.position;

Property Values

Value	Description
static	It is the default value in which elements are rendered in order of appearence in document flow.
absolute	It is used to position the element relative to it's first positioned ancestor element.
fixed	It is used to position the elements relative to browser window.
relative	It is used to position the elements relative to the normal position, that is "top:20" signifies an addition of 20 pixels to the element's TOP position.
sticky	It is used to position the elements based on the user's scroll position. By default it is set at relative and toggles between relative and fixed depending upon scroll position
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents position type of the element.

Examples of HTML DOM Style Object 'position' Property

The following examples sets the different position property values to a div element with id position.

Set position Value to 'absolute' and 'sticky'

The following example sets the position property to absolute and sticky.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object position Property
    </title>
    <style>
        #position {
            padding: 50px;
            height: 200px;
            width: 200px;
            position: static; 
            top: 120px; 
            left: 50px;
            border: 2px solid #04af2f;
            background-color: azure;
            }
    </style>
</head>
<body>
    <p>
        Click to set position property.
    </p>
    <button onclick="fun()">Absolute</button>    
    <button onclick="funTwo()">Sticky</button>
    <br><br><br>
    <div id="position">
        <p>Hello Everyone</p>
        <p>Welcome to Tutorials Point.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("position")
                .style.position= "absolute";
        }  
        function funTwo() {
            document.getElementById("position")
                .style.position= "sticky";
        }        
    </script>
</body>
</html>

Set position Value to 'relative' and 'fixed'

The following example sets the position property to relative and fixed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object position Property
    </title>
    <style>
        #position {
            padding: 50px;
            height: 200px;
            width: 200px;
            position: static; 
            top: 120px; 
            left: 50px;
            border: 2px solid #04af2f;
            background-color: azure;
            }
    </style>
</head>
<body>
    <p>
        Click to set position property.
    </p>
    <button onclick="fun()">Relative</button>    
    <button onclick="funTwo()">Fixed</button>
    <br><br><br>
    <div id="position">
        <p>Hello Everyone</p>
        <p>Welcome to Tutorials Point.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("position")
                .style.position = "relative";
        }
        function funTwo() {
            document.getElementById("position")
                .style.position = "fixed";
        }         
    </script>
</body>
</html>

Supported Browsers

Property
position	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page