如何让粘性表格表头（<thead>）始终置于相对定位单元格上方？

方案1：为thead创建独立层叠上下文 #

给<thead>添加position: relative和z-index: 1，通过隔离层叠上下文确保表头层级高于tbody内容，同时不会影响table外部元素。

修改后的CSS代码：

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

thead {
  position: relative; /* 创建专属层叠上下文 */
  z-index: 1; /* 让thead层级高于tbody */
}

thead th {
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
}

.relative {
  position: relative;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

原理说明 #

• thead设置position: relative后会创建独立层叠上下文，z-index: 1仅在该上下文内部生效，不会干扰table外部元素。
• 粘性表头（position: sticky）属于thead的层叠上下文，自然会高于tbody中所有元素的层级，包括设置了position: relative的单元格内容。

方案2：为tbody设置更低层级 #

如果方案1不适用，可给<tbody>设置position: relative和z-index: 0，主动降低tbody的层叠层级：

tbody {
  position: relative;
  z-index: 0;
}

该方案同样能让表头保持在上方，且不会影响外部元素。

内容的提问来源于stack exchange，提问作者jllodra