背景

项目中有个详情页代码编辑器功能，编辑器用的 @uiw/react-codemirror ，详情页采用antd 抽屉铺满屏幕的方式，结果输入代码时，语法提示弹出框 向右下偏移。

页面构造是这个样子

现象

与光标位置 左右正好相差 侧边栏宽度 和头部高度的偏移距离

查找原因

由于 语法提示框 是 固定定位的,且每次输入的时候动态插入到dom， 他的left top，也是动态计算出来的

• 先是最直接修改语法提示框的left top 值

  useEffect(() => {
    const editorDom = document.querySelector('.cm-theme')
    editorDom?.addEventListener('DOMNodeInserted',()=>{
      const autocompletionDom = document.querySelector('.cm-tooltip-autocomplete')
      if (!autocompletionDom) return
      autocompletionDom.style.cssText = 'position: fixed; top: 0px !important; left: 770.057px;'
  })
  }, [])

结果修改不掉

• 放弃了百度去

css中fixed布局嵌套定位错误的问题：juejin.cn/post/686558…

position: fixed定位失效原因及解决方案：zhuanlan.zhihu.com/p/461011304

结论是 父级元素有设置 transform 属性的元素，使得固定元素不再是相对body的，而是这个元素； 然后我一级一级排除排查上级元素，发现没有这种元素啊

• 最终 使出一样一行注释 大法，发现我的详情页有这样一行样式 backdrop-filter: blur(3px); 把他注释后，解决了！！！

结论

父级元素 设置 transform 属性，backdrop-filter 都会影响 子元素的固定定位的对象