先上图,想做一个类似于配置选择项的功能,添加选择项时要求可自由改名字配置颜色,改变顺序等,为了体验好些,当然改变顺序这里用拖拽改变是最好的了
但是! 问题来了,拖拽时丫的怎么推拽那一栏消失了???
然后!!!! 查了下样式,发现在这个位置
再仔细看一眼样式,发现窗口定位怎么跟 absolute 似的,调整下发现定位问题逐渐离谱。 我直接震惊问好
表示疑惑,这还是我记忆中的 fixed 定位???
顺带提一嘴,拖拽用的 react-beautiful-dnd 这个库,也试了下 react-easy-sort 这个,后面这个代码好简洁,推荐!换了库之后排除了库内部抽风定位错误的问题,于是着手看是研究窗口定位为什么会这样显示
看到了官方对 fixed 的介绍
当元素祖先的 transform , perspective 或 filter 属性非 none 时,容器由视口改为该祖先!!!!
父元素 transform、perspective、filter这些样式会和 fixed冲突, 冲突, 冲突!!
fuck
直接破案,还记得这个弹出层样式里面一点小模糊吗,(平时偶尔喜欢加一些自己觉得好看的样式,该死) 用了 backdrop-filter: blur(5px);
直接删掉
解决!!!! 下班