Open In App

HTML | DOM Style position Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 relative 
                //  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
                //  relative 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:
  8. Browser Support: The browsers supported by DOM position property are listed below:

    • Google Chrome 1
    • Edge 12
    • Internet Explorer 4
    • Firefox 1
    • Opera 4
    • Safari 1


    Last Updated : 29 Nov, 2022
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads