父节点使用transform，子节点fixed定位失效

在使用第三方sdk时，偶遇一个小问题，遂记录一下。

问题现象

第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。
我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。

于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。

问题原因

父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置，不再以视口为基准。
以下三种可以修改fixed上文基准的样式属性：

transform 属性不为 none 的元素
perspective 的值不为 none 的元素
在 will-change 中指定了任意 css 属性

解决方案

原先打算获取dom节点，将其挂载到根节点下，但sdk组件内部状态变更，就会重新渲染一份按钮，故此方案不可行。

最终让sdk开发同事使用Portal的方式将提交按钮放置到根节点下，改变了dom层级结构。（vue的话就是Teleport）

父节点使用transform，子节点fixed定位失效相关推荐

CSS transform 使 fixed 定位失效？
CSS transform 使 fixed 定位失效? 1. 最终实现效果如下看似简单的一个动画,却出现了种种bug,也不叫bug,毕竟是W3C官方的嘛,整整耗费了我一下午的时间去搞它. 2. 布局 ...
zTree中父节点禁用，子节点可以用
参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父节点禁用,子节点可以用 axios.get('/base/unit/unittree ...
SqlServer中递归查询父节点及其所属子节点
SqlServer中递归查询父节点及其所属子节点需求场景 SQL脚本实现-根据子节点查询所有的父节点查询结果 SQL脚本实现-根据父节点查询所有的子节点查询结果需求场景递归查询父节点及其所属 ...
tree父节点不被选中和勾选(所以父节点)只选择子节点
tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...
JavaScript-DOM-获取节点父、兄、子节点or元素
JavaScript-DOM-获取节点父.兄.子节点or元素首先先来解释一下节点与元素的区别,不然真的会看的很懵啊!什么是节点?DOM规定:整个文档是一个文档节点,每个标签就是一个元素节点,也就 ...
jstree禁用父节点点击_Jstree选中父节点时禁用子节点也被选中
这次给大家带来Jstree选中父节点时禁用子节点也被选中,解决Jstree选中父节点时禁用子节点也被选中的注意事项有哪些,下面就是实战案例,一起来看一下. 问题描述: 最近用jstree遇到一个问题, ...
【Groovy】自定义 Xml 生成器 BuilderSupport ( 构造 Xml 节点类 | 封装节点名称、节点值、节点属性、子节点 | 将封装的节点数据转为 Xml 字符串 )
文章目录一.构造 Xml 节点类 1.封装节点名称.节点值.节点属性.子节点 2.将封装的节点数据转为 Xml 字符串二.Xml 节点类完整代码一.构造 Xml 节点类生成 Xml 数据前 , ...
常用递归结构数据表,返会指点节点,跟其子节点的操作
内容来自机械工业出版的仓库管理系统设计一书表结构{WareHouserID , ParentWarehouseID } 查询指定节点跟其子节点的信息 ALTER FUNCTION dbo.GetW ...
cms 移动根节点到根节点中的子节点，根节点消失解决办法
cms 移动根节点到根节点中的子节点,根节点消失解决办法 cms使用对应有个NetCMS数据库,找到其中NT_News_Class表,这个表就是保存栏目名称的表 select * from dbo.N ...
js获取树形JSON数据根节点到任一子节点路径
js获取树形JSON数据根节点到任一子节点路径数据结构,deep表示节点深度现在定义一个方法传入一个子节点对象,返回其对应路径. 首先遍历数据将遍历顺序放在一个数组中![首先递归遍历数据将遍历顺序 ...

父节点使用transform，子节点fixed定位失效

问题现象

问题原因

解决方案

父节点使用transform，子节点fixed定位失效相关推荐

最新文章

热门文章