CSS变换与位置

请向我解释一下转换位置

左

或

右

属性或

-transform:translateX（n）

的区别，因为两者似乎实现了相同的功能，但可以独立应用。我了解硬件加速的可能性，但这取决于实现

// psuedo code;

#box {
    -transition-property: all;
    -transition-duration: 1s;
}

// javascript

box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";

一个比另一个有什么优势？ 谢谢

---

p

顶部

和

左侧

CSS属性仅对定位为

相对

、

绝对

或

固定

的元素起作用。另外，

top

和

left

属性依赖于父对象的位置（相对位置、绝对位置或静态位置）。翻译不受该设置的影响

---

---

当元素具有

位置：相对时，转换转换与应用
顶部
和
左侧
是“相同的”。在任何其他情况下，它们都不是相同的操作。
位置取决于
位置设置为什么，
变换
从元素本身起作用。因此，您可以看到
变换
与
位置：相对相同

但是，您仍然可以在绝对定位的元素上使用
transform
（在不需要额外元素或使用边距的情况下相对定位），并且
transform
是CSS3，因此如果您可以使用
position
，您应该这样做。
渲染层的绘图顺序是：


布局层
漆层
合成层

层中的重画将触发后续层中的重画

更改
左侧
或
边距
将触发布局层中动画元素和DOM中后续元素的重绘（这反过来将触发其他两层中的重绘）

更改
transform
将触发仅对动画元素在合成器层中重新绘制（DOM中的后续元素将不会重新绘制）

性能上的差异（因此在每秒帧数上，或者简单地说，在动画平滑度上）是巨大的。使用第一种技术通常会导致即使在性能良好的机器上（当处理器繁忙时）也会出现不稳定的动画，而第二种技术即使在资源有限的系统上也可能平稳运行

使用
transform
s的另一个优点是合成器重画得到了高度优化（多个元素的动画会导致所有元素重画一次），而更改布局层会在每个元素的每次更改后触发重画

有关渲染技术和渲染性能的更详细说明，我推荐谷歌的。
如上所述：
position:relative
和
translate
可以以不同的方式实现相同的效果

position:relative
发生在布局阶段，这意味着它可以在布局方面与其他元素进行交互

当所有布局过程完成时，
translate
就会发生，而且它甚至已经绘制了，剩下的是元素放置在哪里的问题，因此它与现有布局没有交互

考虑以下示例，使用这两种方法将呈现明显的视觉差异

    .container {
        width: 300px;
        height: 300px;
        overflow: scroll;
        background: red;
    }

    .child {
        width: 280px;
        height: 280px;
        background: green;
    }
    <div class="container">
        <div class="child"></div>
    </div>

.container{
宽度：300px；
高度：300px；
溢出：滚动；
背景：红色；
}
.孩子{
宽度：280px；
高度：280px；
背景：绿色；
}

通过设置
位置：相对；顶部：100px
到子元素，容器没有足够的空间容纳子元素，并且由于
溢出
设置为
滚动
，滚动条将显示

另一方面，通过设置
transform:translateY（100px）
，它与布局无关，因此滚动条不会出现

就像上面说的：

但是，如果相对定位导致“溢出：自动”或
“溢出：滚动”框要有溢出，UA必须允许用户
访问此内容（在其偏移位置），通过
创建滚动条可能会影响布局

总之，
position
参与布局，而
transform
不参与布局，这意味着
transform
可以具有更好的性能

当布局与您无关时，您更喜欢
转换
到
定位
这与使用边距有何不同呢值得注意的是，转换转换值时的性能要比使用位置值或边距值平滑得多。性能取决于浏览器的实现。我更感兴趣的是规范中包含的内容的哲学原因。各种浏览器上的性能测试：（上/左）是最快的。@Kus该测试毫无用处。它是在测量代码的计算速度，它没有考虑浏览器的渲染速度（重绘等）。我不确定我是否理解你的意思。让我澄清我的立场。设置为什么位置并不重要，上面的示例提供了两种不同的方法来执行相同的操作。这当然是CSS规范应该避免的。有一篇好文章：