如何让z-index在sticky header场景下生效？Safari兼容性问题求助

这是Safari处理sticky元素堆叠上下文时的特有行为，和其他浏览器实现不一致，不算严格意义上的Bug，但确实会导致你遇到的问题：当header触发sticky粘滞状态后，Safari会为它创建独立的堆叠上下文，同级的relative footer哪怕z-index更高也无法覆盖；而窗口resize时浏览器重新计算布局，会临时修正这个状态。

给你几个可行的解决思路：

• 把footer的position: relative改成position: sticky，同时设置一个不会触发粘滞的top值（比如top: 100vh），这样footer既保持正常文档流位置，又能和header处于同一类堆叠上下文，高z-index就能覆盖：

  #header{
    position: sticky;
    top:0;
    background-color: red;
    z-index: 1;
    height:60vh
  }
  
  #footer{
    position: sticky;
    top: 100vh; /* 确保不会粘滞在视口内 */
    background-color: yellow;
    z-index: 100;
    height:60vh
  }
  

• 给header和footer分别套独立的容器，通过容器的z-index控制层级，避开同级元素的堆叠冲突：

  <div class="header-wrap">
    <div id="header">Hello world</div>
  </div>
  
  <div class="footer-wrap">
    <div id="footer">Hello world</div>
  </div>
  

  .header-wrap {
    position: relative;
    z-index: 1;
  }
  #header{
    position: sticky;
    top:0;
    background-color: red;
    height:60vh
  }
  .footer-wrap {
    position: relative;
    z-index: 100;
  }
  #footer{
    position: relative;
    background-color: yellow;
    height:60vh
  }
  

• 给header添加transform: translateZ(0)强制创建稳定的堆叠上下文，配合footer的高z-index也能解决问题，但这个方法可能在复杂布局里有副作用，需要测试：

  #header{
    position: sticky;
    top:0;
    background-color: red;
    z-index: 1;
    height:60vh;
    transform: translateZ(0);
  }
  
  #footer{
    position: relative;
    background-color: yellow;
    z-index: 100;
    height:60vh
  }
  

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