因为z-index只对定位元素生效，且受层叠上下文限制；若未设position:sticky或父容器触发新层叠上下文（如opacity、transform），z-index将被忽略或仅在局部生效，需确保同级比较、显式定位及背景色设置。

为什么给 加 z-index 还是被内容盖住

因为 本身没定位，z-index 直接被忽略；即使加了 position: sticky，如果父容器（比如 <table> 或外层 <code><div>）触发了新层叠上下文，<code>z-index 就只能在那个“小房间”里比大小。

常见触发点：opacity: 0.99、transform: translateY(0)、filter: blur(0)、甚至 will-change: transform —— 它们不报错，但会静默创建层叠上下文。

• 用 Chrome DevTools → Elements → 右键 <thead> →「Show all DOM nodes」→ Computed 面板搜 <code>stacking context，看是否标为 Yes
• 临时注释掉父级的 opacity、transform、filter，观察表头是否突然“浮上来”
• <thead> 的 <code>z-index 值必须高于同级滚动内容（比如 <tbody>），推荐设为 <code>10 起步，而非 1

  固定表头时 z-index 和 position: sticky 怎么配

  position: sticky 本身不自动创建层叠上下文，但必须配合 z-index 才能确保它压得住下方滚动的 <tr>。关键不是数字多大，而是层级关系是否落在同一上下文里。 <ul><li><code><thead> 必须显式设 <code>position: sticky + top: 0 + z-index: 10（不能只写 z-index）

• <table> 不要设 <code>position: relative 或 z-index，否则它可能提前创建上下文，把 <thead> 锁死在里面 <li>真正该加 <code>position: relative 的，是包裹整个表格的外层容器（如 <div class="table-wrapper">），并配 <code>z-index: 0 或更高——这样它才成为“主战场”的锚点
• 如果表格嵌在模态框（.modal）里，.modal 自身大概率已建上下文，此时 <thead> 再高也出不去，得把表头抽离 DOM 或提升到 <code> 级别

  table-layout: fixed 对 z-index 层级有影响吗

  没有直接影响，但它决定了 position: sticky 的锚定是否可靠——而锚定失效，z-index 就失去作用对象。

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • table-layout: auto 下，列宽随内容伸缩，sticky 元素无法稳定贴边，滚动时容易错位、抖动甚至“沉底”，看起来像 z-index 失效
  • table-layout: fixed 强制列宽由 <col> 或首行单元格的 width 决定，sticky 才能精确吸附，z-index 才有稳定表现空间
  • 别忘了给 <th> 和对应 <code><td> 设相同 <code>width，否则列对齐崩塌，视觉上就像表头“飘”在数据上面

    固定表头 + 固定首列时 z-index 怎么协调

    固定列和固定表头会争夺同一层叠上下文，z-index 值必须严格分层，且不能只靠数字大小——它们得在同一个“房间”里比。

    • <thead>><first-child>：设 <code>position: sticky + left: 0 + z-index: 20（最高）
    • <tbody>><tr>><first-child>：设 <code>position: sticky + left: 0 + z-index: 10（次高）
    • <thead> 其他 <code><th>：保持 <code>z-index: 10，避免覆盖首列
    • 所有 sticky 元素的背景色必须显式设置（如 background: white），否则透明底会让底层内容“透上来”，误以为 z-index 没生效

    最常被忽略的是：固定列和固定表头的 z-index 必须在同一祖先容器内有效——如果一个在 <table> 里，另一个被抽到外层 <code><div>，它们根本不在一个比较维度里。</div>