How to position a div at specific coordinates ?

Last Updated : 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:

My Personal Notes

Related Articles