如何解决滚动时页面文本覆盖sticky header的问题？

问题分析 #

滚动时文本出现在header下方，通常是两个原因导致：

1. 未给sticky定位的header设置足够高的z-index值，导致内容层级超过header
2. header使用半透明背景，下方文本透过背景显示，视觉上造成“文本在header下方”的错觉

修复方案 #

修改#header的CSS规则，添加z-index并按需调整背景透明度：

#header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  width: 100%;
  height: 80px;
  background: rgba(255, 182, 193, 0.3); /* 若要完全遮挡可改为不透明值，比如#FFB6C1 */
  z-index: 100; /* 设置足够高的层级，确保header在内容上方 */
}

关键说明 #

• z-index仅对非static定位的元素生效，你的header已设置position: sticky，添加后会直接生效
• 若保留半透明背景，即使层级正确，下方文本仍会透过显示，这是半透明的正常效果；需要完全遮挡的话，将背景色改为不透明的#FFB6C1即可
• 检查页面其他元素的z-index，确保没有值超过100的元素覆盖header

完整修改后的CSS代码 #

html {
  font-size: 10px;
}

body {
  font-size: 1.8rem;
  position: relative;
}

#header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  width: 100%;
  height: 80px;
  background: rgba(255, 182, 193, 0.3);
  z-index: 100; /* 添加层级设置 */
}

#header-title {
  width: 20%;
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
}

#nav-bar {
  width: 80%;
  display: flex;
  justify-content: flex-end;
}

.nav-links {
  list-style: none;
  width: 50%;
  max-width: 50%;
}

@media screen and (min-width: 800px) {
  .nav-links {
    list-style: none;
    display: flex;
    width: 40%;
    max-width: 40%;
    justify-content: space-between;
  }
}

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