如何使用JQuery实现控制按钮驱动元素稳定精准移动（每次100px）？

你的问题出在混用对立定位属性导致偏移计算冲突：交替点击不同方向按钮时，top/bottom、left/right这类对立属性会同时生效，后续的+=相对增量会因多个定位属性的干扰而失效，无法准确计算偏移量。

要解决这个问题，只需统一使用top和left两个属性控制定位，避免同时使用对立属性。以下是修复后的完整代码：

HTML #

<div class="text" style="text-align: center;" id="text">
  Hello world
</div>

<br>
<br>

<div class="controls">
  <button id="left">left</button>
  <button id="down">down</button>
  <button id="right">right</button>
  <button id="up">up</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS #

.controls {
  position: absolute;
  display: flex;
}

.text {
  position: relative;
  top: 0;
  left: 0;
}

JavaScript #

$("#up").click(function() {
  $("#text").css("top", "-=100px")
})

$("#left").click(function() {
  $("#text").css("left", "-=100px")
})

$("#down").click(function() {
  $("#text").css("top", "+=100px")
})

$("#right").click(function() {
  $("#text").css("left", "+=100px")
})

修复说明： #

• CSS中给文本初始设置top: 0; left: 0;，统一基于这两个属性做定位基准
• JS中调整方向对应的偏移逻辑：
  • 向上：减少top值
  • 向下：增加top值
  • 向左：减少left值
  • 向右：增加left值
    这样每次点击都会基于当前的top/left值做准确的100px偏移，不会出现属性冲突导致的失效问题。

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