z-index 对 <table> 元素本身无效，必须先设 position: relative（或 absolute/fixed/sticky）才生效；<tr> 和 <td> 默认 static，无法直接设 z-index，需用包裹容器实现分层。
z-index 对 <table> 元素本身无效，必须先定位
直接给 <table> 或其 <tr>/<td> 设置 z-index 不起作用——因为它们默认是 position: static。CSS 规范明确要求：只有 position 值为 relative、absolute、fixed 或 sticky 的元素，z-index 才生效。
常见错误现象：z-index: 999 写了但完全没反应；表格被其他浮动元素或弹窗盖住，调数字也没用。
- 必须显式声明
position: relative（最常用）或absolute，再配z-index -
<tr>和<td>是表格内部格式化上下文的一部分，不能直接设position—— 浏览器会忽略或重置（尤其在标准模式下） - 真正可安全加定位的节点通常是：
<table>自身、包裹它的<div>、或某列/某行的<th>/<td>外层容器（如套一层<div>）
表格行/单元格要分层？别动 <tr>，改用包裹容器
想让某一行“浮”在其他行上面，或某个单元格内容压过相邻内容，<tr> 本身不支持 position，强行写会失效或破坏表格结构（比如塌陷、边框错位）。
正确做法是把需要分层的内容单独抽出来，用定位容器包裹：
立即学习“前端免费学习笔记（深入）”；
- 对目标
<td>内部内容套一层<div class="layered-cell">，然后给这个<div>设position: relative+z-index - 若需整行高亮悬浮，给该
<tr>加position: relative在部分浏览器中可能触发渲染异常；稳妥方案是用transform: translateZ(0)强制创建独立层叠上下文，再配合子容器定位 - 注意：
transform或opacity < 1会创建新层叠上下文，导致内部z-index只在该行内有效，无法跨行比大小
表格和弹窗/下拉菜单打架？检查层叠上下文隔离
即使 <table> 设了 position: relative 和 z-index: 1000，仍被一个 z-index: 10 的模态框盖住——大概率是表格父容器（比如某个 <section>）触发了新层叠上下文。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型触发条件（常被忽略）：
- 父级有
opacity: 0.99或filter: blur(0.5px) - 父级用了
transform: scale(1)或will-change: transform - 父级设置了
isolation: isolate
调试建议：
- 打开 Chrome DevTools → Layers 面板，看表格是否被框在一个独立“层”里
- 临时删掉可疑父级样式，确认层级是否恢复
- 真要保动画又需全局层级？把弹窗类元素（
modal、tooltip）用document.body.appendChild()动态插入，彻底脱离原有 DOM 层级
数值设多大才不踩坑？按语义预留而非堆数字
给表格设 z-index: 9999 看似保险，实则掩盖结构问题，还可能在旧版 Safari 或某些嵌入式 WebView 中溢出（z-index 实际是 32 位有符号整数，上限为 2147483647，但部分引擎解析异常）。
推荐做法：
- 定义 CSS 自定义属性统一管理：
--z-table-header: 100、--z-table-frozen-col: 200、--z-table-overlay: 1000 - 表格内部浮动操作栏（如编辑按钮）用
z-index: var(--z-table-overlay)，避免硬编码 - 负值慎用：
z-index: -1会让元素沉到父容器背景色之下——如果父容器没背景，它就“消失”了
真正麻烦的从来不是数字大小，而是多个独立层叠上下文之间没有清晰的层级契约。一旦表格嵌在卡片组件里，而卡片又嵌在布局容器中，每一层都可能悄悄创建上下文——这时靠调 z-index 已经没用，得回溯 DOM 结构和祖先样式。
