如何让sticky元素子元素覆盖无关fixed元素且父元素位于其下层

需求为实现如下层叠效果：

• <button>元素显示在固定定位<div>的上方
• <nav>元素除button外的其余内容全部位于<div>下方，被div遮挡

现有实现的样式配置：

• <nav>设置position: sticky粘性定位
• <nav>内的<button>子元素设置position: relative; z-index: 30
• 与nav无嵌套关系的<div>设置position: fixed; z-index: 20

现有问题：button的z-index值高于div，但完全无法显示。如果直接给nav设置z-index: 30，虽然button可以显示在div上方，但nav的其他内容、背景色也会同步盖在div之上，不符合需求。

初始问题代码（存在语法笔误）：

<nav style="position: sticky">
  <button style="position: relative; z-index: 30"></button>
</nav>

<div style="position: fixed: z-index: 20"></div>

问题根因：如果sticky定位的元素z-index不为auto，会创建独立的层叠上下文，子元素的z-index仅在当前上下文内生效，无法和外层元素比较层级。

不需要调整HTML结构，仅修改样式即可实现效果：

1. 保持<nav>的position: sticky属性，不要给nav设置任何z-index值，保持默认z-index: auto，此时sticky定位的nav不会生成独立层叠上下文
2. 保持<button>的position: relative; z-index: 30设置不变
3. 修正div的样式语法错误，将position: fixed后的冒号改为分号，保持position: fixed; z-index: 20

调整后可直接运行的代码：

<nav style="position: sticky; top: 0;">
  <!-- nav其他内容 -->
  <button style="position: relative; z-index: 30">按钮</button>
  <!-- nav其他内容 -->
</nav>

<div style="position: fixed; z-index: 20; inset: 0;"></div>

原理说明 #

• 层叠上下文规则中，position: sticky元素仅在z-index值不为auto时才会创建独立层叠上下文，z-index为auto时内部子元素的z-index会参与全局层叠顺序比较
• 未设置z-index的sticky定位nav，层叠优先级低于设置了z-index: 20的fixed定位div，因此nav除button外的内容会被div正常遮挡
• button设置的z-index: 30优先级高于div的z-index值，因此会正常显示在div上方，完全匹配需求。

如果遇到极个别老旧浏览器的兼容问题，可以将button改为position: fixed定位，手动对齐到目标位置，脱离nav的层叠上下文即可，现代浏览器不需要做此兼容。

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