关于sticky元素与relative同级元素层级问题的困惑

核心逻辑：同一堆叠上下文内的DOM顺序优先级 #

虽然position: sticky确实会创建堆叠上下文，但在这个场景里，两个元素的堆叠行为遵循以下关键规则：

1. 未指定z-index时，堆叠上下文层级平级：position: sticky创建的堆叠上下文若使用默认的z-index: auto，和不创建堆叠上下文的position: relative元素（同样z-index: auto），都处于根堆叠上下文的同一层级组内。
2. DOM出现顺序决定覆盖关系：在同一层级组内，浏览器按元素在DOM中的先后顺序渲染——后出现的元素会覆盖先出现的元素。你的#card在#nav之后，所以即使#nav变为stuck状态，仍会被#card覆盖。

为什么添加z-index能解决问题？ #

当给#nav设置z-index: 1（或其他非auto值）后，它的堆叠上下文会被提升到更高层级，优先级超过#card所在的默认层级组，因此不会再被覆盖。

验证代码示例 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #nav {
        height: 50px;
        background-color: #333;
        position: sticky;
        top: 0;
        z-index: 1; /* 添加后解决覆盖问题 */
      }
      #card {
        position: relative;
        background: linear-gradient(45deg, #f3ec78, #af4261);
        min-height: 1200px;
      }
    </style>
  </head>
  <body>
    <div id="nav"></div>
    <div id="card"></div>
  </body>
</html>

补充说明 #

• position: relative只有在设置非auto的z-index时才会创建堆叠上下文，否则只是普通定位元素，处于根堆叠上下文的默认层级。
• Sticky元素的"stuck"状态仅改变自身位置，不会主动提升堆叠层级，必须通过z-index手动调整优先级。

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