位置：相对 vs 变换：翻译

Question

例如，如果我们想将元素向上移动 50px 以上的两个例子

示例 1

position: relative;
top: -50px;

示例 2

transform: translateY(-50px);

您能否解释一下未来行为可能存在的差异，或者可能存在的一些细微差别？

Answer 1

示例 1

• 可以在正常情况下使用

• 几乎所有浏览器都支持 - 不需要为其他浏览器重写

示例 2

• 可用于动画 - 使用变换您可以在三个维度上旋转对象
• 有限的浏览器支持（需要 CSS3，所以不是早期版本的 IE 或 Opera Mini）
• 结合使用延迟，您可以动画旋转