为何使用CSS right属性时，第三步div无法向左移动？

问题根源 #

你第三步无法左移的核心原因是：绝对定位元素同时存在left和right行内样式时，left会主导水平位置，right的设置会被忽略。

第一步移动时，你给元素设置了style.left = a + "px"，这个行内样式会一直保留在元素上。到第三步你只修改right属性，但left的值还在，浏览器会优先按照left的值来定位元素，所以改right完全不起作用。

解决方法 #

这里提供两种简单的修改思路：

方法1：清除left属性，让right生效 #

在第三步移动前，把元素的left属性设为auto，这样right就能正常控制位置了：

let inter3 = setInterval(function() {
  if (a == 0) {
    clearInterval(inter3);
  } else {
    a -= 1;
    node.style.left = "auto"; // 移除left的行内样式
    node.style.right = a + "px";
  }
}, 1)

方法2：统一用left控制水平移动 #

其实没必要切换到right，直接减小left的值就能实现左移，逻辑更统一：

let inter3 = setInterval(function() {
  if (a == 0) {
    clearInterval(inter3);
  } else {
    a -= 1;
    node.style.left = a + "px"; // 直接让left值递减，实现左移
  }
}, 1)

代码优化建议 #

嵌套多层setInterval会让代码可读性变差，你可以用单个定时器+状态变量的方式来实现循环移动，逻辑更清晰：

let node = document.querySelector(".node");
// 状态：0=右移，1=下移，2=左移，3=上移
let moveState = 0;
const position = { x: 0, y: 0 };
// 定义矩形边界
const maxRight = 260;
const maxBottom = 639;

setInterval(() => {
  switch(moveState) {
    case 0: // 向右移动
      position.x += 1;
      node.style.left = `${position.x}px`;
      if (position.x === maxRight) moveState = 1;
      break;
    case 1: // 向下移动
      position.y += 1;
      node.style.top = `${position.y}px`;
      if (position.y === maxBottom) moveState = 2;
      break;
    case 2: // 向左移动
      position.x -= 1;
      node.style.left = `${position.x}px`;
      if (position.x === 0) moveState = 3; // 切换到上移
      break;
    case 3: // 向上移动（可选，回到起点循环）
      position.y -= 1;
      node.style.top = `${position.y}px`;
      if (position.y === 0) moveState = 0; // 回到右移，循环往复
      break;
  }
}, 1);

内容的提问来源于stack exchange，提问作者Mayank