z-index不生效的根本原因是元素未建立层叠上下文；仅当position为relative/absolute/fixed/sticky时才起作用，static下被忽略，且父元素的transform、opacity
z-index 不生效？先确认元素是否进入定位上下文
很多情况下调 z-index 没反应，根本原因是目标元素没建立自己的层叠上下文（stacking context）。只有 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才起作用。
常见踩坑点：
- 对
position: static元素设z-index—— 完全被忽略 - 父容器有
transform、opacity 、filter等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该上下文内比较 - 多个同级定位元素中，文档流顺序（HTML 书写顺序）仍会影响默认堆叠，
z-index: auto的元素按源顺序排布
可视化编辑器里拖拽调整层级，本质是改哪些属性？
主流 HTML5 可视化编辑器（如 GrapesJS、PagePlug、或自研 canvas+DOM 混合方案）在“上移一层”“置顶”操作时，通常不是只改 z-index，而是组合操作：
- “上移一层”：查找同级定位兄弟节点，把当前元素
insertBefore到下一个兄弟前；若无下一个，则 append 到父容器末尾 - “置顶”：把当前元素
appendChild到父容器，确保 DOM 位置最靠后（配合z-index自增更稳妥） - “置底”：
prepend到父容器开头，或设极小z-index（如-1），但要注意父上下文是否已截断负值渲染
注意：仅靠 DOM 顺序调整，在无 z-index 时有效；一旦有显式 z-index，DOM 顺序会被覆盖。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 动态调整层级时，z-index 值怎么设才安全？
硬写死 z-index: 999 或 9999 是反模式。真实项目中应维护一个轻量级层级管理器：
- 给不同组件类型分配基础层级区间（如：背景层
10，内容层100，弹窗层1000，提示浮层2000） - 同一类型内动态递增：每次“上移”时读取当前最大
z-index，+1 后写回（避免用getComputedStyle读auto，改用自定义 data 属性缓存） - 慎用
z-index: 2147483647（MAX_INT）—— 某些旧版浏览器或 WebView 会溢出或降级处理
示例逻辑片段：
element.style.zIndex = Math.max(100, parseInt(getCurrentMaxZIndexInParent(element)) + 1);
Canvas 渲染场景下，“层级”概念和 DOM 完全不同
如果编辑器底层用 绘制（如流程图、白板类工具），那“层级”就是绘制顺序：先 draw 的在下，后 draw 的在上。此时：
- 没有
z-index，也没有 DOM 顺序概念 - 调整层级 = 调整渲染队列中对象的数组索引位置
- “置顶” =
objects.push(objects.splice(index, 1)[0])；“置底” =objects.unshift(objects.splice(index, 1)[0]) - 若支持分组（Group），组内顺序独立于组外，需递归处理
这种场景下，任何试图用 CSS 控制 canvas 内部元素层级的操作都是无效的——它压根不在 CSS 渲染树里。
真正容易被忽略的是混合渲染：比如 canvas 上叠加了一个 DOM 弹窗按钮。这时要同时协调 canvas 的绘制顺序 + DOM 元素的 z-index + 容器的 transform-style: preserve-3d 等设置，否则会出现遮挡错乱。
