JQuery实现CSS位置增量叠加，避免覆盖初始位置

嘿，我懂你遇到的麻烦了——每次想把刚拿到手牌的卡牌挪一点位置，直接设置left属性总会把它的初始位置覆盖掉，没法实现“每次叠加一点位移”的效果对吧？

问题出在你直接给left赋值固定值，而不是基于当前位置做增量计算。举个例子，如果写$(element).css('left', '20px')，不管元素之前在哪，都会直接跳到left为20px的位置；但我们需要的是“在当前位置基础上再加20px”。

正确的实现方式 #

你可以通过jQuery的position()（或offset()，根据布局需求选）方法获取元素当前的位置数值，然后叠加增量后再设置回去：

// 假设你的卡牌选择器是.card，每次叠加15px的left位移
$('.card').each(function() {
  // 获取当前元素相对于父容器的left值（纯数字，不带px单位）
  const currentLeft = $(this).position().left;
  // 叠加增量后重新设置left属性
  $(this).css('left', `${currentLeft + 15}px`);
});

关键注意点 #

1. 确保元素的定位属性正确：只有当元素的position设为relative、absolute或fixed时，left属性才会生效，所以要在CSS里给卡牌加上：

.card {
  position: relative; /* 或者absolute，根据你的手牌容器布局调整 */
}

2. 区分position()和offset()：
   • position()获取的是元素相对于最近的定位父元素的位置，适合手牌这种有容器的场景；
   • offset()获取的是元素相对于文档的位置，如果你的手牌容器是全屏布局的话也可以用，但一般前者更合适。

这样每次卡牌到手牌时，就会在它当前的位置基础上叠加位移，不会覆盖初始位置啦～

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