position:fixed显⽰错位
在项⽬开发过程中遇到⼀个问题,使⽤layer显⽰弹出框时,弹出框⾥⾯的标签设置position:fixed显⽰位置是从弹出框位置进⾏定位,⽽⾮屏幕视⼝(viewport)的位置来定位。
经过调查发现,原来layer弹出框使添加了layui-anim类,这样样式类中使⽤了transform进⾏动画的效果的设置。
position:fixed定位错误原因:当使⽤了position:fixed 的元素,如果其祖先元素存在 transform 值不为 none ,那么该元素将相对于设定了 transform 的祖先元素进⾏定位。
position标签属性
为什么会出现种情况:
1.任何⾮ transform 为 none 值都会导致⼀个堆叠上下⽂(Stacking Context)和包含块(Containing Block)的创建。
2.由于堆叠上下⽂的创建,该元素会影响其⼦元素的固定定位。设置了 position:fixed 的⼦元素将不会基于 viewport 定位,⽽是基于这个⽗元素。
解决⽅案:
1.设置 transform 为 none
2.把使⽤position:fixed 的元素放置在 transform 不为 none 的外⾯
除了transform 不为 none 情况下导致position:fixed 的元素显⽰错位,还有其他样式也可以导致,以下3 种⽅式会使得 position:fixed 定位的错位:
2.perspective 值不为 none 的元素
3.在 will-change 中指定了任意 CSS 属性
总结:⽬前开发过程中发现导致position:fixed 定位的错位主要都是css3新增属性导致。