如何用JavaScript将设置过绝对定位的HTML元素恢复原标准流位置

核心错误点 #

• classList.add、classList.remove方法操作类名时不需要带CSS选择器的前缀.，你传入".moving"相当于操作名称为.moving的类，和你定义的moving类完全不匹配，导致类没有正确添加和移除。
• 元素在标准流中的默认定位属性是static，并非relative，手动设置position: relative无法还原到默认的标准流布局状态。
• 直接给style属性整体赋值CSS字符串的写法兼容性较差，同时会清空该元素所有已有的内联样式，容易引发其他样式问题。

修正方案 #

正确添加类的写法 #

// 类名不需要带.前缀
pic.classList.add("moving");

正确还原样式的写法 #

优先选择移除内联样式的方式，让元素自动继承样式表中定义的默认属性，避免手动赋值覆盖原有规则：

// 移除类同样不带.前缀
pic.classList.remove("moving");
// 移除对应内联属性，恢复默认样式
puzzleSource.style.removeProperty('position');
puzzleSource.style.removeProperty('display');

如果你确定元素原始的标准流状态确实需要position: relative和display: inline，可以使用更稳妥的单属性赋值写法：

pic.classList.remove("moving");
puzzleSource.style.position = 'relative';
puzzleSource.style.display = 'inline';

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