问题:
页面是多张卡片滑动切换效果,引入了swiper组件(https://3.swiper.com.cn/)。后来需要加一个弹框,固定显示在页面某个位置,一般都是用属性position:fixed;
但是,fixed始终不起效果。
原因:
如果一个元素设置了position:fixed;其父元素设置了tansform属性的话,不管是scale()、rotate()、还是translate(),其fixed值都会失效,直接会使position:fixed;变成position:absolute;的效果。
因为swiper组件用的就是tansform进行卡片位置变换的,所以不起作用
解决:
将弹框代码放到swiper组件代码的外面就可以啦!
参考地址:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/