Position: Fixed与scrollIntoView()兼容问题：搜索栏被表格遮挡

一、修复搜索栏被表格覆盖的问题 #

你的搜索栏设置了position: fixed但被表格覆盖，核心是**层级优先级（z-index）**的问题：

• 表格容器#screen设置了z-index: 110，而fixed定位的元素如果没显式设置z-index，层级可能低于它，导致被覆盖。
• 给搜索栏设置比容器更高的z-index值，比如z-index: 120，同时如果搜索栏是放在#screen内部的fixed元素，父容器的overflow:hidden会裁剪它，建议把搜索栏移到#screen外部，避免被裁剪。

示例CSS修改：

#search-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120; /* 数值大于#screen的110即可 */
  width: 255px; /* 和表格容器宽度匹配，避免错位 */
  /* 保留你原来的其他样式 */
}

二、优化选中行的滚动定位（替代scrollIntoView()） #

你当前用scrollIntoView()会触发整个页面滚动，而我们需要在表格容器#screen内部滚动到选中行，推荐用容器的scrollTop属性精确控制：

function scrollToSelectedRow(selectedRow) {
  const screen = document.getElementById('screen');
  const rowOffsetTop = selectedRow.offsetTop;
  const containerScrollTop = screen.scrollTop;
  const containerHeight = screen.clientHeight;

  // 判断选中行是否在容器可视区域外，按需调整滚动位置
  if (rowOffsetTop < containerScrollTop) {
    screen.scrollTop = rowOffsetTop;
  } else if (rowOffsetTop + selectedRow.offsetHeight > containerScrollTop + containerHeight) {
    screen.scrollTop = rowOffsetTop + selectedRow.offsetHeight - containerHeight;
  }
}

// 替换原来的scrollIntoView()调用
// selectedRow.scrollIntoView();
scrollToSelectedRow(selectedRow);

如果偏好使用scrollIntoView()，可以传入参数让它在容器内滚动：

selectedRow.scrollIntoView({
  block: 'nearest', // 确保元素进入可视区域即可，不强制居中
  behavior: 'auto', // 可选换成'smooth'实现平滑滚动
  inline: 'start'
});

额外适配建议 #

• 给表格容器#screen设置padding-top，值等于搜索栏的高度，避免表格顶部内容被fixed搜索栏遮挡。

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