CSS position: fixed absolute失效问题

·  阅读 852
CSS position: fixed absolute失效问题

本文已参与「新人创作礼」活动,一起开启掘金创作之路

前言

在css中,元素的position取值有staticrelativeabsolutefixedsticky等。其中,当元素设置了absolutefixed后,元素会脱离文档流。这两个值的主要区别就是定位的参照元素不同。

  • absolute是相对于最近的非 static 祖先元素定位,当这样的祖先元素不存在时,则相对于初始包含块定位(html)。
  • fixedabsolute类似,但元素相对于viewport 视口定位。

那么问题来了,fixed一定会相对于viewport 视口定位吗?

探究

image.png image.png

如上图,可以看到inner的元素定位是fixed,但元素并没有基于视窗进行定位。 原因是inner的父级元素存在属性transform,经测试,当container添加perspective,filter属性时,或是will-change的属性值里包含transform,perspective,filter时,效果是一样的。

分析

transformfilterperspectivewill-change设为transform、filter、perspective会使fixed不是相对于视觉窗口定位。这些属性本身的特质影响了fixed的参考包含块。

参考W3C文档:

image.png 意思就是: transform或filter或perspective不为none时fixed会相对于设置了transform或filter或perspective不为none的父元素相对定位,absolute是相对于最近的非 static 祖先元素定位,当这样的祖先元素不存在时,则相对于设置了transform或filter或perspective不为none的父元素进行定位。

参考MDN文档:

image.png

will-change设置了transform、filter、perspective,也会形成一个包含块,同样影响fixedabsolute的定位。

总结

在css中,有些属性设置会影响absolutefixed定位的参考元素,如transformfilterperspective等等。当我们需要保证元素的定位参照元素时,应尽量避免使用这些属性。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改