相邻元素为AgGrid时position:sticky不生效如何解决？

position: sticky 失效是因为 AgGrid 初始化时会自动为自身根节点创建独立堆叠上下文，内部默认的溢出裁剪、z-index、transform属性会打破sticky元素相对于最近滚动视口的定位计算逻辑，导致吸顶规则不生效。

• 方案1：给sticky元素补充堆叠上下文属性（侵入性最低，优先使用）
  直接修改sticky类的样式，新增两行规则即可：

  div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #666;
    padding: 40px;
    font-size: 25px;
    /* 新增规则 */
    z-index: 10;
    isolation: isolate;
  }
  

  原理：isolation: isolate 会让吸顶元素生成独立的堆叠上下文，完全不受AgGrid内部元素的层级、transform属性干扰；设置z-index为10是因为AgGrid默认表头、单元格的层级在1-5区间，保证吸顶按钮不会被表格内容遮挡。

• 方案2：隔离AgGrid的堆叠作用域（适配复杂嵌套布局场景）
  如果方案1在特定布局下仍有异常，可以给AgGrid外层套一层低层级容器，主动划定它的堆叠影响范围，不需要改动AgGrid本身的配置：

  <body>
    <div class="sticky">
      <button>Deselect Rows</button>
    </div>
    <!-- 新增一层包裹容器，限制AgGrid的堆叠上下文影响范围 -->
    <div style="position: relative; z-index: 1;">
      <div id="myGrid" class="ag-theme-alpine" style="height: 1500px"></div>
    </div>
    <script type="text/javascript">
      const eGridDiv = document.getElementById("myGrid");
      new agGrid.Grid(eGridDiv, {});
    </script>
  </body>
  

  原理：外层包裹的低z-index容器会把AgGrid生成的所有元素的堆叠层级限制在容器内部，不会溢出影响到外部的吸顶元素。

• 不要给吸顶元素本身，以及它的任意祖先节点设置overflow: hidden/auto/scroll属性，否则sticky会相对于该溢出容器计算定位，直接导致吸顶失效
• 如果页面使用自定义滚动容器而非body作为滚动视口，要确保sticky元素的top偏移量匹配该滚动容器的顶部边距，和AgGrid内部的滚动逻辑完全隔离

内容的提问来源于stack exchange，提问作者dasd-431