写react h5，侧边弹出的有2级的导航菜单的时候，第二级的子菜单，一开始我是用绝对定位，一级菜单的每一项都给他相对定位，然后子菜单放在一级菜单项里面，每一个一级菜单项，里面都放一个二级菜单，这样就方便传参。
但是这个绝对定位，居然只是让他横向滚动了，没有溢出来，所以改成fixed定位试试，结果fixed定位也失败了，最后只能用ReactDOM.createPortal，来把2级菜单渲染到根节点上来实现。
后来查了一下导致fixed失效的原因，这个弹出菜单，外面有容器 是有transform属性的，这个属性可能是为了启用gpu加速把，只要涉及到css上设置到3d的，哪怕值为0，都会默认启用gpu加速，但是这个外层的属性刚好破坏了fixed定位
具体看这里
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
image.png
上面这张图是fixed定位为什么不生效的原因
下面是absolute定位不生效的原因，外层元素确实找到了overflow，transform等属性
image.png
网友评论