Given an HTML document and the task is to set the position of a <div> at specific coordinates on the web page using JavaScript. we’re going to discuss a 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, we will set the DIV at a specific position at the end of the document.
html
<!DOCTYPE html><html lang="en"><head> <title> How to position a div at specific coordinates? </title></head><body> <h1 style="color:green;"> neveropen </h1> <h3> Click on button to change the position of the DIV </h3> <div id="GFG_DIV"> This is Div box. </div> <br> <button onClick="GFG_Fun()"> click here </button> <h3 id="GFG" style="color: green;"></h3> <script> let elm = document.getElementById("GFG"); function GFG_Fun() { let x = 370; let y = 250; let el = document.getElementById('GFG_DIV'); el.style.position = "absolute"; el.style.left = x + 'px'; el.style.top = y + 'px'; elm.innerHTML = "Position of element is changed."; } </script></body></html> |
Output:
Position a div at specific coordinates
Example 2: In this example, the DIV is positioned at the top-left corner of the document.
html
<!DOCTYPE html><html lang="en"><head> <title> How to position a div at specific coordinates? </title> <style> #GFG_DIV { background: green; height: 50px; width: 80px; margin: 0 auto; color: white; } </style></head><body> <h1 style="color:green;"> neveropen </h1> <h3> Click on button to change the position of the DIV. </h3> <div id="GFG_DIV"> This is Div box. </div> <br> <button onClick="GFG_Fun()"> click here </button> <h3 id="GFG" style="color: green;"></h3> <script> let elm = document.getElementById("GFG"); function GFG_Fun() { let x = 0; let y = 0; let el = document.getElementById('GFG_DIV'); el.style.position = "absolute"; el.style.left = x + 'px'; el.style.top = y + 'px'; elm.innerHTML = "Position of element is changed."; } </script></body></html> |
Output:
