开发者社区> 问答> 正文

CSS中translate和position: relative设置的偏移有什么区别?

position: relative;也是相对自己当前位置。 transform: translate(x,y);也是相对于当前位置偏移吧? 有什么区别呢?

展开
收起
a123456678 2016-03-25 10:02:54 3765 0
1 条回答
写回答
取消 提交回答
  • 从页面布局的角度看
    transform 和 position:relative 的效果是一样的。

    差别在于,transform 可以简单地作用于 position:absolute 的元素上面,而 position:relative; 还得加额外的 html

    从动画角度来说
    使用 transform 或 position 实现动画效果时是有很大差别。

    使用 transform 时,可以让 GPU 参与运算,动画的 FPS 更高。

    使用 position 时,最小的动画变化的单位是 1px,而使用 transform 参与时,可以做到更小(动画效果更加平滑)

    2019-07-17 19:13:34
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载