css position的几个属性值和性能问题
2020-05-09
2 min read
position的属性值
-
relative 相对定位
相对该元素的正常位置进行定位
元素不会脱离标准文档流
可通过z-index定义层叠关系 -
absolute 绝对定位
相对于static定位以外的第一个定位的父元素进行绝对定位，如果没有就相对于浏览器窗口定位
元素脱离标准文档流
可通过z-index定义层叠关系 -
fixed 固定定位
相对与浏览器窗口进行定位
脱离标准文档流
可通过z-index定义层叠关系 -
static 静态定位
元素正常在文档流中出现，top、bottom、left、right、z-index都不起作用 -
sticky 粘性定位
可以认为是固定定位和相对定位的组合，元素跨越特定阈值前为相对定位，元素跨越特定阈值后为固定定位。和固定定位不同的是，粘性定位不会脱离文档流，不会影响其他元素的位置。
副作用
实现动画效果的时候，如果用position，我们会发现动画的运行不是很流畅，因为top和left的改变会触发浏览器的回流和重绘，每改变一次位置就回重新渲染一次元素，造成整个动画的过程都在不断触发浏览器的重新渲染，非常影响性能
如果把position用transform来实现的话，就不会这样，transform位置的改变不会引起浏览器的回流和重绘，因为transform动画是由cpu控制的，支持硬件加速