HTML | DOM Style position Property - GeeksforGeeks

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
object.style.position
Set position syntax:object.style.position = "static | absolute | fixed | relative | 
sticky | initial | inherit"
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:
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: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: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: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: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.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: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 ChromeInternet ExplorerFirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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:
<!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:
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:
<!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:
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:
<!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:
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:
<!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:
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.
<!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.
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:
<!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:
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 ChromeInternet ExplorerFirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
<!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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills