84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
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了。