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新增属性导致。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。