如何使用CSS sticky实现滚动时顶部header被页面内容覆盖的效果

需求描述 #

我需要实现指定网站的简化效果，不需要关闭按钮、捐赠按钮、两栏布局等附加功能，仅满足以下要求：

• 页面整体作为一个主区块
• 顶部的号召性用语/提示header固定在页面顶部，滚动时被其余页面内容完整覆盖，并非仅导航栏覆盖蓝色区块，而是整个页面内容都可覆盖该顶部区域

遇到的问题 #

我曾尝试使用CSS position: sticky; 实现，但效果不符合预期。目前现有资料中sticky的相关用法说明很多，但很少有涉及上述效果的实现方案。
附预期效果演示动图

补充说明 #

我尝试了目前能找到的各类建议方案，运行后效果均一致：header文字会从主内容下方穿过，在棕榈树视觉元素底部重新出现，所有内容相对于该CSS效果均为静态。
附实际运行效果演示动图

实现方案 #

你要的效果本质是「顶部固定元素被后续文档流自然覆盖」，不需要用sticky，用固定定位+层级控制即可，核心思路如下：

1. 给顶部header设置position: fixed固定在视口顶部，z-index设为最低层级
2. 给后续的主内容区块设置position: relative以开启层叠上下文，z-index设为比header高，同时给主内容区块设置顶部margin，值等于header的高度，避免初始状态主内容被header遮挡

完整可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>顶部条覆盖效果示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 顶部提示条 */
    .top-notice {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #0061df;
      color: #fff;
      z-index: 1;
    }
    /* 主内容容器 */
    .main-content {
      position: relative;
      z-index: 2;
      margin-top: 40px;
      min-height: 200vh;
      background: #fff;
      padding: 24px;
    }
    /* 演示用内容块 */
    .content-block {
      height: 300px;
      margin-bottom: 20px;
      background: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="top-notice">这是顶部的号召性提示内容</div>
  <div class="main-content">
    <div class="content-block">主内容区块1，滚动时会覆盖顶部提示条</div>
    <div class="content-block">主内容区块2</div>
    <div class="content-block">主内容区块3</div>
    <div class="content-block">主内容区块4</div>
  </div>
</body>
</html>

原理解释 #

• position: fixed 保证初始状态下顶部提示条固定在视口顶部
• 主内容设置position: relative和更高的z-index，层叠顺序位于fixed的header上方，滚动时主内容向上移动，自然覆盖下方的header，完全符合需求
• 之前用sticky不符合预期是因为sticky元素始终属于当前父级的文档流，层级默认和同级元素一致，无法被后续的整个页面内容完整覆盖

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