如何让绝对定位图片始终显示在CSS Grid所有元素之上及滚动问题解决

1. 修复横向滚动时箭头图片被挤出的问题 #

当前nav-legend使用position: sticky是相对于body（滚动容器）定位，但横向滚动时body宽度会被Grid单元格撑开，导致sticky元素无法保持在视口内。可以改用position: fixed让元素固定在视口左侧，确保不会被挤出：

.nav-legend {
  position: fixed;
  top: 10px;
  left: 10px;
  padding-left: 0;
}

无论横向还是纵向滚动，箭头图片都会固定在视口左上角，不会被Grid单元格遮挡或挤出。

2. 移除body的负外边距 #

原来的负边距是为了抵消sticky元素的位置偏移，改用fixed定位后，直接删除body的负边距即可：

body {
  margin: 0;
  padding: 0;
  /* 删除margin-top: -102px */
}

如果坚持使用sticky而非fixed，可以通过拆分滚动容器来实现：

body {
  margin: 0;
  padding: 0;
  overflow-x: clip; /* 阻止body横向滚动 */
}

.grid-container {
  overflow-x: auto; /* 让Grid容器单独承担横向滚动 */
}

.nav-legend {
  position: sticky;
  top: 10px;
  left: 10px;
  padding-left: 0;
}

这种方式下，sticky元素相对于body定位，Grid在独立容器内横向滚动，既不影响箭头显示，也能彻底移除body的负边距。

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