How to position a div at specific coordinates ?

24 Jul, 2019
Given an HTML document, The task is to position a <div> at specific coordinates on the web page using JavaScript. we’re going to discuss few techniques.
Approach:
First setting the style.position property of the element.
Then set the style.top, style.left properties of the element, which we want to position.
Example 1: In this example, the DIV is positioned at the end of the document.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript       | Position a DIV in a specific coordinates.    </title>    <style>        #GFG_DIV {            background: green;            height: 100px;            width: 200px;            margin: 0 auto;            color: white;        }    </style></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"        style="font-size: 19px;              font-weight: bold;">    </p>    <div id="GFG_DIV">        This is Div box.    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="GFG_DOWN"        style="color: green;               font-size: 24px;               font-weight: bold;">    </p>    <script>        var el_up =             document.getElementById(              "GFG_UP");        var el_down =             document.getElementById(              "GFG_DOWN");        el_up.innerHTML =           "Click on button to change"+          " the position of the DIV.";          function GFG_Fun() {            var x = 370;            var y = 250;            var el = document.getElementById('GFG_DIV');            el.style.position = "absolute";            el.style.left = x + 'px';            el.style.top = y + 'px';            el_down.innerHTML =               "Position of element is changed.";        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example 2: In this example, the DIV is positioned at the top-left corner of the document.
<!DOCTYPE HTML><html>  <head>    <title>        JavaScript |       Position a DIV in a specific coordinates.    </title>    <style>        #GFG_DIV {            background: green;            height: 50px;            width: 80px;            margin: 0 auto;            color: white;        }    </style></head>  <body style="text-align:center;"      id="body">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP"        style="font-size: 19px;              font-weight: bold;">    </p>    <div id="GFG_DIV">        This is Div box.    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="GFG_DOWN"        style="color: green;               font-size: 24px;              font-weight: bold;">    </p>    <script>        var el_up =             document.getElementById("GFG_UP");        var el_down =             document.getElementById("GFG_DOWN");        el_up.innerHTML =           "Click on button to change the position of the DIV.";          function GFG_Fun() {            var x = 0;            var y = 0;            var el = document.getElementById('GFG_DIV');            el.style.position = "absolute";            el.style.left = x + 'px';            el.style.top = y + 'px';            el_down.innerHTML = "Position of element is changed.";        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?