fixed header的z-index问题：避免遮挡滚动条且不影响button可点击性

方案1：调整Header宽度避开滚动条 #

问题核心是width:100%会让header覆盖包含滚动条的整个body宽度，改用100vw（视口宽度，不含滚动条）就能避开滚动条区域，同时保持header的z-index:1确保它在main上方，完全不影响按钮点击。

修改后的CSS：

header {
  background-color: blue;
  position: fixed;
  width: 100vw; /* 替换原width:100% */
  z-index: 1;
}

方案2：让Main区域独立滚动（推荐） #

将滚动行为从body/html转移到main容器，滚动条会属于main自身，fixed header不会覆盖它，同时无需调整z-index为负数，逻辑更清晰。

修改后的完整CSS：

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 隐藏全局滚动条 */
}

header {
  background-color: blue;
  position: fixed;
  width: 100%;
  z-index: 1;
}

main {
  background-color: yellow;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto; /* 让main容器垂直滚动 */
}

button {
  cursor: pointer;
}

此方案下header始终固定在顶部，main的滚动条独立显示，按钮可正常点击。

方案3：通过Pointer-events控制事件拦截 #

如果header本身不需要交互（或仅部分元素需要），可以给header设置pointer-events:none，使其不拦截鼠标事件，即使它覆盖滚动条和按钮区域，底层元素也能正常响应。若header内有需要交互的元素，单独给这些元素恢复pointer-events:auto即可。

修改后的CSS：

header {
  background-color: blue;
  position: fixed;
  width: 100%;
  z-index: 1;
  pointer-events: none; /* 禁止header拦截鼠标事件 */
}

header h1 {
  pointer-events: auto; /* 若header内有需要点击的元素，恢复其交互能力 */
}

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