Skip to content
Related Articles

Related Articles

HTML | DOM Style position Property
  • Last Updated : 02 Aug, 2019

The position property sets or returns the type of positioning method used by the element. It may be static, relative, absolute or fixed.

Syntax:

  • Return position syntax:
    object.style.position
  • Set position syntax:
    object.style.position = "static | absolute | fixed | relative | 
    sticky | initial | inherit"

Return Value: It returns a string which represents the position type of the element.

Properties:

  1. static: It is the default property. The appearance of elements in the document remains static in accordance with the document flow.
    Example:






    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
          <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
      
                <h4>DOM Style Position Property</h4>
      
        </div>
      
        <script>
            function position() {
                
                //  change position from reletive 
                //  to static.
                document.getElementById(
                  "gfg").style.position = "static";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  2. absolute: It positions the element relative to the first positioned element.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
          <center>Geeks
             <button onclick="position()">
              Press
             </button>
          </center
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
            <p>
                <h4>DOM Style Position Property</h4></p>
      
        </div>
      
        <script>
            function position() {
                
                //  Set position from
                //  reletive to absolute.
                document.getElementById(
                  "gfg").style.position = "absolute";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  3. fixed: It positions the elements relative to the browser window.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
         <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center>
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
             <h4>DOM Style Position Property</h4>
        </div>
      
        <script>
            function position() {
                document.getElementById(
                  "gfg").style.position = "fixed";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  4. relative: It positions the elements relative to the normal position, so “right:40” signifies an addition of 40 pixels to the element’s RIGHT position.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
        <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
           <h4>DOM Style Position Property</h4>
      
        </div>
      
        <script>
            function position() {
                document.getElementById(
                  "gfg").style.position = "relative";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  5. sticky: It positions the elements based on the scroll position of the user.The scrolling operation is performed between relative and fixed property values. By default, the scroll position is set at relative value.
    Example:






    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
        <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center
        </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
                <h4>DOM Style Position Property</h4>
        </div>
      
        <script>
            function position() {
                document.getElementById(
                  "gfg").style.position = "sticky";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:

    Note:Internet Explore does not support this property value and Apple Safari supports this property from 6.1 version.

  6. initial: It sets the position to it’s default value.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
        <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
           <h4>DOM Style Position Property</h4>
      
        </div>
      
        <script>
            function position() {
                document.getElementById(
                  "gfg").style.position = "initial";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  7. inherit: It inherits the position values of the parent element.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <h1>
        <center>Geeks 
             <button onclick="position()">
              Press
             </button>
          </center
      </h1>
        <br>
      
        <style>
            #gfg {
                border: 1px solid black;
                background-color: green;
                width: 215px;
                height: 60px;
                position: relative;
                top: 100px;
            }
        </style>
    </head>
      
    <body>
      
        <div id="gfg">
                <h4>DOM Style Position Property</h4>
      
        </div>
      
        <script>
            function position() {
                document.getElementById(
                  "gfg").style.position = "inherit";
            }
        </script>
      
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:

    Browser Support: The browsers supported by DOM position property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :