关于jQuery中attr方法无效的问题

Question

关于jQuery中attr方法无效的问题

代码如下：

        <script src="./Jquery/jquery-3.6.1.min.js"></script>
        <script>
            $("div").on("click",(e)=>{
                $("div").attr("left","100px");
                $("div").attr("top","100px");
                // $("div").attr({
                //     left:"100px",
                //     top:"100px"
                // });
                // $("div").css("left","100px");
                // $("div").css("top","100px");
            })
        </script>

div {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100px;
                height: 100px;
                background-color: aquamarine;
            }

运行结果及报错内容 ：
无报错，但是这里无法使用jQuery对象的attr方法更改div属性

我的解答思路和尝试过的方法 ：
jQuery的CSS方法可以成功更改这个div的left和top的值，利用原生JS也ok，但是使用这个attr方法就不行。
在网上查找了一下attr方法的语法好像也没什么问题。
然后试了一下prop方法也不行。
现在就挺迷惑的。CSS中也有个div设置定位