HTML | DOM Style position Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    • Before clicking on the button:
    • After clicking on the button:
  8. Browser Support: The browsers supported by DOM position property are listed below:

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


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.