写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
写react h5，侧边弹出的有2级的导航菜单的时候，第二级的子菜单，一开始我是用绝对定位，一级菜单的每一项都给他...
position定位 absolute：绝对定位 static:自动定位 relative：相对定位 fixed：...
定位 position:static | relative | absolute | fixed; static ...
absolute，fixed 均为移出常规文档流，是相对父元素位置的定位 absolute，脱离文档流 fixed...
定位 positon: relative(相对)、absolute(绝对)、static(无定位)、fixed(固...
position:static 默认relative 相对定位absolute 绝对定位fixed 固定定...
默认定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性...
1. 认识定位 position: 值： fixed（固定定位）relative（相对定位）absolute（绝...
相对定位——relative 绝对定位——absolute 默认值——static 固定地位——fixed 定位：...
定位：定位属性为position，属性值为static/relative/absolute/fixed。通过定位可...
本文标题：absolute，fixed 定位失效
本文链接：https://www.haomeiwen.com/subject/fqbtvhtx.html
网友评论