84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
position: relative;也是相对自己当前位置。 transform: translate(x,y);也是相对于当前位置偏移吧? 有什么区别呢?
position: relative;
transform: translate(x,y);
光阴似箭催人老,日月如移越少年。
transform 和 position:relative 的效果是一样的。
transform
position:relative
差别在于,transform 可以简单地作用于 position:absolute 的元素上面,而 position:relative; 还得加额外的 html
position:absolute
position:relative;
使用 transform 或 position 实现动画效果时是有很大差别。
position
使用 transform 时,可以让 GPU 参与运算,动画的 FPS 更高。
使用 position 时,最小的动画变化的单位是 1px,而使用 transform 参与时,可以做到更小(动画效果更加平滑)
1px
参考资料: Paul Irish 的 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
功能都一样。但是translate不会引起浏览器的重绘和重排,这就相当nice了。
从页面布局的角度看
transform
和position:relative
的效果是一样的。差别在于,
transform
可以简单地作用于position:absolute
的元素上面,而position:relative;
还得加额外的 html从动画角度来说
使用
transform
或position
实现动画效果时是有很大差别。使用
transform
时,可以让 GPU 参与运算,动画的 FPS 更高。使用
position
时,最小的动画变化的单位是1px
,而使用transform
参与时,可以做到更小(动画效果更加平滑)参考资料: Paul Irish 的 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
总结
功能都一样。但是translate不会引起浏览器的重绘和重排,这就相当nice了。