z-index失效本质是层叠上下文被意外创建，需确保元素已定位且父级未触发独立堆叠环境；浮层应挂载到body并用递增z-index管理顺序。
HTML 编辑器里所谓“浮层层级遮挡控制”，本质不是编辑器功能，而是你插入的 HTML/CSS/JS 在浏览器中渲染时的层叠行为。没有统一 API 可调用，必须按浏览器渲染规则来组织结构和样式。
为什么 z-index 在编辑器里设了也不生效
常见现象：z-index: 9999 写得再高，浮层还是被导航栏、弹窗或 iframe 盖住。这不是编辑器限制，而是层叠上下文（stacking context）被意外创建：
- 父容器用了
transform、opacity: 0.99、will-change或filter，会强制新建一个独立层叠环境，子元素的z-index只在内部比大小 - 编辑器内容区（如
contenteditable容器）本身可能带isolation: auto或嵌套了多个position: relative包裹层 - iframe 子页面完全隔离，父页的
z-index对它无效；同理，Web Component 的 shadow DOM 也自带封闭层叠
浮层必须挂到 body 底部才能可靠控制
编辑器内拖拽生成的浮层（如右键菜单、悬浮工具条、实时预览框），若留在编辑器 DOM 子树里，极易被祖先层叠上下文截断。最稳做法是动态挂载到 document.body：
- 创建浮层时用
document.body.appendChild(overlayEl)，而非插进编辑器容器 - 用
getBoundingClientRect()计算目标位置，再通过top/left绝对定位，而非依赖相对父容器 - 监听
scroll和resize事件修正位置，但避免高频触发——加throttle或用IntersectionObserver替代 - 关闭时记得
overlayEl.remove()，别只设display: none，否则残留 DOM 会干扰后续层级计算
透明遮罩层（backdrop）必须显式撑满且禁用触摸穿透
用于模态操作的半透明遮罩，常因尺寸或交互设置错误导致盖不住、点不透或滚动异常：
- 尺寸写死：
top: 0; left: 0; width: 100%; height: 100%比100vw/100vh更兼容，尤其 iOS Safari 横屏时不会漏底 - 必须加
pointer-events: auto（默认已是），但若内部有可滚动区域，需单独给子容器设pointer-events: auto，否则整个遮罩会拦截所有手势 - 移动端务必加
touch-action: none，否则手指划过时触发页面缩放或橡皮筋效果，遮罩响应迟滞 - 背景用
background: rgba(0,0,0,0.6)，别用opacity——后者会让整个遮罩及其子元素都变透明，且触发新层叠上下文
编辑器内多浮层共存时 renderOrder 不起作用
Three.js 里的 renderOrder 是 WebGL 渲染管线概念，和 HTML 浮层无关。编辑器里多个浮层（比如同时开着属性面板 + 实时预览 + 色板）靠的是纯 CSS 层叠顺序：
- 所有浮层必须同属一个层叠上下文：统一挂到
body，且父级不带transform等触发属性 - 用递增的
z-index值区分优先级，例如工具栏z-index: 1000、属性面板z-index: 1010、临时提示z-index: 1020 - 避免用 JS 动态改
z-index来“置顶”——这会导致焦点管理混乱；正确做法是点击时把该浮层 DOM 节点用appendChild()移到最后，利用 DOM 顺序影响层叠 - 如果浮层含
iframe或第三方组件，它们内部的z-index无法从外部干预，只能控制其容器本身的层叠位置
真正难的不是设多少 z-index，而是识别哪个祖先节点悄悄创建了层叠上下文——打开 DevTools 的 “Computed” 面板，逐级看 transform、opacity、will-change 是否为非默认值，比反复调数字快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
