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:

My Personal Notes

Recommended Posts: