问题是你使用了上、下、左和右的位置。选择左或右，上或下--就像x轴和y轴，而不是所有的4个值。一旦你在一个元素上设置了左和右，浏览器会尝试调整元素的大小，使元素的左边处于定义的值。而右边则是它的定义值。在该点上元素将停止移动。
只需要用上和左。当你点击左按钮，从左边的位置减去，当你点击右按钮，它会增加到左边的位置。同样的上/下，从顶部的位置加上和减去。
请参见下面的调整示例：
第一个

当你点击一个按钮时，它会在元素上添加内联样式。当你点击另一个按钮时，它会在元素上添加 * 更多 * 样式。如果属性不匹配，后续的样式不会 * 替换 * 现有的样式。它会添加到现有的样式中。你需要处理这个问题。
一个策略是否定相反的属性，就像我在这里做的那样，一个更优雅的解决方案是在每个轴上只选择一个方向，as brobert7 has done。
建议：不要在布局中使用换行符。这不是它们的目的。使用边距或填充。
第一个