如何解决表格粘性列内下拉菜单被后续列遮挡的问题

问题根源 #

设置了position: sticky的单元格会创建独立的堆叠上下文，内部的绝对定位下拉菜单被限制在这个上下文里，就算加了高z-index也没法突破后续单元格的遮挡。

解决步骤 #

1. 把下拉菜单的定位方式从absolute改成fixed，脱离粘性单元格的堆叠上下文
2. 用JS动态计算下拉菜单的位置，确保它和按钮对齐
3. 调整表格单元格的z-index层级，保证粘性列优先级更高

修改后的CSS代码

/* Dropdown Button */
.dropbtn {
  background-color: #04aa6d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: fixed; /* 改为fixed定位，脱离粘性单元格的堆叠上下文 */
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 99999; /* 确保层级远高于表格 */
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  /* 用CSS变量接收JS计算的位置 */
  left: var(--dropdown-left, 0);
  top: var(--dropdown-top, 0);
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.container {
  max-width: 500px;
  margin: auto;
  margin-top: 3rem;
  overflow-x: auto;
}

table {
  font-family: "Open Sans", sans-serif;
  position: relative;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}
table * {
  border: none;
}
table thead tr {
  color: #2d3748;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}
table thead tr th {
  background: #edf2f7;
  padding: 0.75rem 1.5rem;
  vertical-align: middle;
}
table tbody tr:nth-child(odd) td {
  background: #ffffff;
  z-index: 1; /* 普通单元格层级低于粘性列 */
}
table tbody tr:nth-child(even) td {
  background: #edf2f7;
  z-index: 1;
}
table tbody td {
  color: #1a202c;
  text-align: left;
  padding: 1.5rem 1.5rem;
  vertical-align: middle;
  font-size: 1.125rem;
  font-weight: normal;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}
table th:first-child {
  border-top-left-radius: 0.5rem;
}
table tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}
table th:last-child {
  border-top-right-radius: 0.5rem;
}
table tr > th:first-child,
table tr > td:first-child {
  position: sticky;
  z-index: 2; /* 粘性列层级高于普通单元格 */
  left: 0;
}

补充JS代码（用于定位下拉菜单）

// 监听下拉菜单的鼠标移入事件，计算并设置位置
document.querySelectorAll('.dropdown').forEach(dropdown => {
  const btn = dropdown.querySelector('.dropbtn');
  dropdown.addEventListener('mouseenter', () => {
    const rect = btn.getBoundingClientRect();
    // 通过CSS变量传递位置
    dropdown.style.setProperty('--dropdown-left', `${rect.left}px`);
    dropdown.style.setProperty('--dropdown-top', `${rect.bottom}px`);
  });
});

原理说明 #

把下拉菜单改成fixed定位后，它不再属于粘性单元格的堆叠上下文，而是直接相对于视口渲染，这样就能覆盖在表格的其他单元格上面。JS代码的作用是获取按钮的位置，让下拉菜单刚好显示在按钮下方，保证布局的正确性。

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