本文已参与「新人创作礼」活动，一起开启掘金创作之路
前言
在css中，元素的position取值有static、relative，absolute，fixed，sticky等。其中，当元素设置了absolute或fixed后，元素会脱离文档流。这两个值的主要区别就是定位的参照元素不同。
absolute是相对于最近的非static祖先元素定位，当这样的祖先元素不存在时，则相对于初始包含块定位（html）。fixed与absolute类似，但元素相对于viewport 视口定位。
那么问题来了，fixed一定会相对于viewport 视口定位吗？
探究
如上图，可以看到inner的元素定位是fixed，但元素并没有基于视窗进行定位。
原因是inner的父级元素存在属性transform，经测试，当container添加perspective,filter属性时，或是will-change的属性值里包含transform,perspective,filter时，效果是一样的。
分析
transform、filter、perspective、will-change设为transform、filter、perspective会使fixed不是相对于视觉窗口定位。这些属性本身的特质影响了fixed的参考包含块。
参考W3C文档：
意思就是： transform或filter或perspective不为none时，
fixed会相对于设置了transform或filter或perspective不为none的父元素相对定位，absolute是相对于最近的非 static 祖先元素定位，当这样的祖先元素不存在时，则相对于设置了transform或filter或perspective不为none的父元素进行定位。
参考MDN文档：
will-change设置了transform、filter、perspective，也会形成一个包含块，同样影响fixed，absolute的定位。
总结
在css中，有些属性设置会影响absolute、 fixed定位的参考元素，如transform、filter、perspective等等。当我们需要保证元素的定位参照元素时，应尽量避免使用这些属性。
