如何将 div 定位在特定坐标处？

给定一个 HTML 文档，任务是使用 JavaScript 将

定位在网页上的特定坐标处。我们将讨论一些技术。

方法：

• 首先设置元素的style.position属性。
• 然后设置我们要定位的元素的style.top、style.left属性。

示例 1：在此示例中，DIV 位于文档的末尾。

  

    
        JavaScript 
      | Position a DIV in a specific coordinates.
    
    
        #GFG_DIV {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
        This is Div box.
    
    
    
        click here
    
    
    
    
        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.";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：在此示例中，DIV 位于文档的左上角。

  

    
        JavaScript | 
      Position a DIV in a specific coordinates.
    
    
        #GFG_DIV {
            background: green;
            height: 50px;
            width: 80px;
            margin: 0 auto;
            color: white;
        }
    

  

      
            GeeksForGeeks  
        
    
    
    
        This is Div box.
    
    
    
        click here
    
    
    
    
        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.";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：