求助：CSS实现的两个按钮点击时联动移动，求排查故障原因

我仔细看了你的代码，问题出在你用margin来实现按钮按下的位移效果——margin是文档流布局的一部分，当你点击一个按钮修改它的margin值时，会触发整个行的布局重排，导致同一行的另一个按钮也跟着被“挤”移位了。

修复方案 #

把:active伪类里的margin设置替换成相对定位的偏移，这样只会改变当前按钮的视觉位置，不会影响其他元素的布局：

.button:active {
  position: relative;
  top: 2px;
  left: 10px;
  /* 保留底部margin来补偿top偏移，避免容器高度跳动 */
  margin-bottom: 20px;
}

为什么这样有效？ #

position: relative是让元素相对于自己原来的位置偏移，它不会脱离文档流，但偏移过程中不会改变元素在文档流中的占位空间——也就是说，按钮看起来移动了，但它原来占的位置还在，所以不会触发兄弟元素的布局重排，自然另一个按钮就不会跟着动了。

而你原来用margin的方式，会直接改变按钮在文档流中的占位大小，浏览器不得不重新计算整个行的布局，导致另一个按钮也被推动移位。

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