CSS中定位和transform的比较

最新推荐文章于 2024-08-26 07:28:57 发布

原创最新推荐文章于 2024-08-26 07:28:57 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发

CSS 专栏收录该内容

1 篇文章

订阅专栏

探讨CSS中Position和Transform属性在移动元素时的区别。Position适用于相对定位，而Transform（尤其是translateX和translateY）在实现相同效果时，提供更优的浏览器性能，减少重绘时间，特别适合动画和大规模项目。

探讨对象

Position

CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。

transform

CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。

区别和选择

既然在已有移动功能存在的情况，为何CSS3需要新增一个transform属性呢？请大家看下面这个demo

  <style>
    .box {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: move1 3s;
    }
    @keyframes move1 {
      from {
        left: 0px;
      }
      to {
        left: 200px;
      }
    }
    @keyframes move2 {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(200);
      }
    }
  </style>
  <body>
    <div class="box"></div>
  </body>

我们定义了一个div块，同时写了两个动画move1和move2，其中move1是采用position的方法让div块从左到右移动200px。move2是采用transform让div块从左到右也是移动200px。那么，既然都是同样的效果，主要差别体现在哪里呢？

这张图片展示了move1也就是postion方法移动div的浏览器的性能测试，我们可以看到在前3s内浏览器重绘时间为 26.9ms,25.8ms,24.7ms总共加起来有80ms多。让我们再来看看move2，也就是transform的测试结果我们可以明显看到，move2消耗的时间只用3.5ms,2.8ms,1.9ms，总过不过8ms多。性能消耗只有position的十分之一！可想而知，CSS3推出新的transform属性也是加快了浏览器的运行速度。