动态高亮悬浮窗需实时同步目标元素位置尺寸，用getBoundingClientRect()获取视口坐标，避免z-index被transform截断，推荐伪元素覆盖或独立浮层实现，并通过MutationObserver监听DOM变化确保高亮不脱节。
动态高亮悬浮窗不是靠 box-shadow 或纯 CSS 动画“假装”高亮，而是要让高亮区域真实跟随目标元素位置、尺寸变化，并响应 DOM 更新（比如 Vue/React 重渲染、表格行增删）。核心在于「定位同步 + 尺寸监听 + 层级穿透」。
用 getBoundingClientRect() 实时抓取目标位置
悬浮窗的高亮边框或蒙层必须基于目标元素当前视口坐标绘制，不能依赖预设 top/left。每次触发前必须调用 element.getBoundingClientRect() 获取最新值。
- 注意：该方法返回的是相对于视口的坐标，滚动时自动更新，无需手动监听
scroll - 若目标在
transform: scale(0.8)的容器内，getBoundingClientRect()已包含缩放影响，无需额外换算 - 不要缓存结果——DOM 变化后它立刻失效；高频调用也无性能问题（浏览器已优化）
避免 z-index 被父级 transform 截断
常见错误：悬浮窗明明设置了 z-index: 9999，却仍被遮挡。根本原因是其某个祖先元素用了 transform、filter 或 perspective，创建了新的层叠上下文，导致子元素的 z-index 只在该上下文内生效。
- 检查 DevTools → Elements → 选中悬浮窗 → 查看 Computed 面板里
z-index是否为auto（说明被截断） - 修复方式：把悬浮窗移出有
transform的父容器，直接挂到document.body下 - 若必须保留在局部作用域，可对目标元素加
isolation: isolate，强制其创建独立层叠上下文
动态高亮边框的两种实现路径
高亮本质是「描边」，但不能用 outline（不占布局、无法圆角），也不能直接改目标 border（会破坏原有样式）。推荐以下方案：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
伪元素覆盖法：给目标元素加
::after，position: absolute+inset: -4px+border: 2px solid #ff6b6b。需确保目标父级position: relative，且自身无overflow: hidden -
独立浮层法：用 JS 创建一个
div，position: fixed，通过getBoundingClientRect()设置top/left/width/height，再加pointer-events: none确保不拦截点击 - 二者区别：
::after更轻量但受父级样式限制；独立浮层完全自由，适合跨 iframe 或复杂嵌套场景
监听 DOM 变化防止高亮脱节
目标元素尺寸或位置可能因 JS 动态插入内容、CSS 媒体查询切换、字体加载完成而改变。仅靠初始定位远远不够。
- 用
MutationObserver监听目标元素的childList和subtree，触发后重新获取getBoundingClientRect() - 对
resize事件无需监听——元素尺寸变化不会触发该事件，只有window才会 - 若目标是表格单元格（
td），需监听其所在tr的DOMSubtreeModified（兼容旧版）或改用ResizeObserver观察tr高度
最易被忽略的点：高亮状态必须与焦点/键盘导航同步。当用户用 Tab 键移动到目标元素时，悬浮高亮应立即激活；按 Esc 应关闭。这要求把高亮逻辑和 focus/blur 事件绑定，而非只依赖鼠标悬停。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
