如何让sticky容器内的fixed元素跨浏览器生效？仅Chrome可用

问题现象 #

搭建了包含sticky头部、内容区和页脚的简易CSS布局，头部内的.fixed元素仅在Chrome中能正常固定，在Firefox、Safari等浏览器中滚动页面时会跟随页面移动，调整窗口大小或滚动后问题显现：

• 初始状态（看似正常）：
  
• 滚动后（失效状态）：
  

问题原因 #

核心问题在于fixed元素的父级是sticky定位容器。不同浏览器的渲染机制存在差异：

• Chrome会忽略父级的sticky属性，让fixed元素始终相对于视口定位；
• Firefox和Safari则会将fixed元素的定位上下文绑定到sticky父容器，当sticky头部开始“粘住”滚动时，fixed元素会跟随父级一起移动。

解决方案 #

提供两种可行的解决思路，可根据实际布局需求选择：

方案1：将fixed元素移出sticky头部容器 #

把.fixed元素从.header容器中移出，直接放到顶层的.container下，这样它的定位上下文就是浏览器视口，所有浏览器表现一致。

修改后的HTML代码：

<div class="container">
  <header class="header">
    <div class="container-header">
      <div>
         Some thing
      </div>
    </div>
  </header>
  
  <div class="fixed">Shoud be fixed but it scrolls in firefox, safari</div>

  <div class="content">
    <div class="main">main</div>
  </div>

  <footer class="footer">footer</footer>
</div>

原有的.fixed CSS样式无需调整。

方案2：用绝对定位替代fixed，绑定到sticky头部 #

如果不想调整元素结构，可以把.fixed的position: fixed改为position: absolute，同时让父容器.container-header占满头部宽度，这样元素会相对于sticky头部定位，跟随头部一起保持在视口上方。

修改后的CSS代码：

.container-header {
  display: flex;
  position: relative;
  width: 100%; /* 让容器占满头部宽度 */
}

.fixed {
  position: absolute; /* 替换fixed为absolute */
  right: 1%; /* 用right替代margin-left，适配更灵活 */
  color: red;
  font-weight: bold;
}

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