因为z-index只对定位元素生效，且受层叠上下文限制；若<thead>未设position:sticky或父容器触发新层叠上下文（如opacity、transform），z-index将被忽略或仅在局部生效，需确保同级比较、显式定位及背景色设置。
为什么给 加 z-index 还是被内容盖住
因为 本身没定位，z-index 直接被忽略；即使加了 position: sticky，如果父容器（比如 <table> 或外层 <div>）触发了新层叠上下文，z-index 就只能在那个“小房间”里比大小。
常见触发点：opacity: 0.99、transform: translateY(0)、filter: blur(0)、甚至 will-change: transform —— 它们不报错，但会静默创建层叠上下文。
- 用 Chrome DevTools → Elements → 右键
<thead> →「Show all DOM nodes」→ Computed 面板搜 stacking context，看是否标为 Yes
- 临时注释掉父级的
opacity、transform、filter，观察表头是否突然“浮上来”
-
<thead> 的 z-index 值必须高于同级滚动内容（比如 <tbody>），推荐设为 10 起步，而非 1
固定表头时 z-index 和 position: sticky 怎么配
position: sticky 本身不自动创建层叠上下文，但必须配合 z-index 才能确保它压得住下方滚动的 <tr>。关键不是数字多大，而是层级关系是否落在同一上下文里。
-
<thead> 必须显式设 position: sticky + top: 0 + z-index: 10（不能只写 z-index）
-
<table> 不要设 position: relative 或 z-index，否则它可能提前创建上下文，把 <thead> 锁死在里面
- 真正该加
position: relative 的，是包裹整个表格的外层容器（如 <div class="table-wrapper">），并配 z-index: 0 或更高——这样它才成为“主战场”的锚点
- 如果表格嵌在模态框（
.modal）里，.modal 自身大概率已建上下文，此时 <thead> 再高也出不去，得把表头抽离 DOM 或提升到 <body> 级别
table-layout: fixed 对 z-index 层级有影响吗
没有直接影响，但它决定了 position: sticky 的锚定是否可靠——而锚定失效，z-index 就失去作用对象。
立即学习“前端免费学习笔记（深入）”；
-
table-layout: auto 下，列宽随内容伸缩，sticky 元素无法稳定贴边，滚动时容易错位、抖动甚至“沉底”，看起来像 z-index 失效
-
table-layout: fixed 强制列宽由 <col> 或首行单元格的 width 决定，sticky 才能精确吸附，z-index 才有稳定表现空间
- 别忘了给
<th> 和对应 <td> 设相同 width，否则列对齐崩塌，视觉上就像表头“飘”在数据上面
固定表头 + 固定首列时 z-index 怎么协调
固定列和固定表头会争夺同一层叠上下文，z-index 值必须严格分层，且不能只靠数字大小——它们得在同一个“房间”里比。
-
<thead>><th:first-child>：设 position: sticky + left: 0 + z-index: 20（最高）
-
<tbody>><tr>><td:first-child>：设 position: sticky + left: 0 + z-index: 10（次高）
-
<thead> 其他 <th>：保持 z-index: 10，避免覆盖首列
- 所有
sticky 元素的背景色必须显式设置（如 background: white），否则透明底会让底层内容“透上来”，误以为 z-index 没生效
最常被忽略的是：固定列和固定表头的 z-index 必须在同一祖先容器内有效——如果一个在 <table> 里，另一个被抽到外层 <div>，它们根本不在一个比较维度里。
z-index 直接被忽略；即使加了 position: sticky，如果父容器（比如 <table> 或外层 <div>）触发了新层叠上下文，z-index 就只能在那个“小房间”里比大小。
常见触发点：opacity: 0.99、transform: translateY(0)、filter: blur(0)、甚至 will-change: transform —— 它们不报错，但会静默创建层叠上下文。
- 用 Chrome DevTools → Elements → 右键
<thead>→「Show all DOM nodes」→ Computed 面板搜stacking context，看是否标为Yes - 临时注释掉父级的
opacity、transform、filter，观察表头是否突然“浮上来” -
<thead>的z-index值必须高于同级滚动内容（比如<tbody>），推荐设为10起步，而非1
固定表头时 z-index 和 position: sticky 怎么配
position: sticky 本身不自动创建层叠上下文，但必须配合 z-index 才能确保它压得住下方滚动的 <tr>。关键不是数字多大，而是层级关系是否落在同一上下文里。
-
<thead>必须显式设position: sticky+top: 0+z-index: 10（不能只写z-index） -
<table>不要设position: relative或z-index，否则它可能提前创建上下文，把<thead>锁死在里面 - 真正该加
position: relative的，是包裹整个表格的外层容器（如<div class="table-wrapper">），并配z-index: 0或更高——这样它才成为“主战场”的锚点 - 如果表格嵌在模态框（
.modal）里，.modal自身大概率已建上下文，此时<thead>再高也出不去，得把表头抽离 DOM 或提升到<body>级别
table-layout: fixed 对 z-index 层级有影响吗
没有直接影响，但它决定了 position: sticky 的锚定是否可靠——而锚定失效，z-index 就失去作用对象。
立即学习“前端免费学习笔记（深入）”；
-
table-layout: auto下，列宽随内容伸缩，sticky元素无法稳定贴边，滚动时容易错位、抖动甚至“沉底”，看起来像z-index失效 -
table-layout: fixed强制列宽由<col>或首行单元格的width决定，sticky才能精确吸附，z-index才有稳定表现空间 - 别忘了给
<th>和对应<td>设相同width，否则列对齐崩塌，视觉上就像表头“飘”在数据上面
固定表头 + 固定首列时 z-index 怎么协调
固定列和固定表头会争夺同一层叠上下文，z-index 值必须严格分层，且不能只靠数字大小——它们得在同一个“房间”里比。
-
<thead>><th:first-child>：设position: sticky+left: 0+z-index: 20（最高） -
<tbody>><tr>><td:first-child>：设position: sticky+left: 0+z-index: 10（次高） -
<thead>其他<th>：保持z-index: 10，避免覆盖首列 - 所有
sticky元素的背景色必须显式设置（如background: white），否则透明底会让底层内容“透上来”，误以为z-index没生效
最常被忽略的是：固定列和固定表头的 z-index 必须在同一祖先容器内有效——如果一个在 <table> 里，另一个被抽到外层 <div>，它们根本不在一个比较维度里。
