How to position a div at specific coordinates ?
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: