如何使用 jquery 设置 div 的位置？

Question

如何设置 div 和 jQuery 的位置？我试过使用这个：

<!DOCTYPE html>
<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
        </script>
    </head>
    <body>
        <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png" id = "flag" width = "200px" height = "140px">
        <div id = "pole"></div>
    
        <script>
            $("#pole").width(10);
            $("#pole").height(400);
            $("#pole").css("background-color", "gray");
            console.log($("#pole").position());
            $("#pole").css({'left': 200});
        
        </script>
    </body>
</html>

但是 'pole' div 只是停留在原来的位置....有人可以帮忙吗？谢谢

Answer 1

为什么不使用 $("#pole").css("position", "absolute");？

Answer 2

将#pole' 位置设置为绝对位置。

$("#pole").width(10);
$("#pole").height(400);
$("#pole").css("background-color", "gray");
$("#pole").css("position", "absolute");
$("#pole").css({'left': 200});


$("#pole").on( "click", function() {
  $("#pole").css({'left': 10});
});

<!DOCTYPE html>
<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
        </script>
    </head>
    <body>
        <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png" id = "flag" width = "200px" height = "140px">
        <div id = "pole"></div>
    
        
    </body>
</html>

如何使用 jquery 设置 div 的位置？

How to set position of a div using jquery?

html

jquery

position