fixed 不生效的一种情况

最新推荐文章于 2025-01-25 17:35:44 发布

原创最新推荐文章于 2025-01-25 17:35:44 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端经验记录专栏收录该内容

13 篇文章

订阅专栏

在使用layui创建固定位置的弹出框时遇到问题，弹框随页面滚动而非固定不动。经排查发现，问题源于祖先节点的transform属性，删除后fixed效果恢复正常。

前几天，使用layui 生成一个弹出框，本来它是fixed 的。

像下面这样。

index =  layer.open({
                    type: 1,
                    shade: 0,
                    title: false,
                    area: ['100%', '90px'],
                    content: $('#msgTop'),
                    offset: '35px',
                    fixed: true
                });

但是呢，真实页面上，却不是fixed 的，随着页面的滚动条滚动，它也滚动。

调了很久，最后看到网上说，可能是它的祖先节点有transform 属性，所以fixed 不生效。

于是我把这个元素的所有祖先节点的transform 属性删除了，果然fixed 生效了。