Router-Outlet子组件内position: sticky属性及Mat Table粘性表头失效问题求助

我之前也踩过这个坑！当把带sticky表头的Mat Table放到router-outlet加载的子组件里就失效，移到根组件又正常，核心原因是路由组件的外层容器（或者router-outlet的父容器）设置了干扰sticky定位的CSS属性，破坏了sticky元素的滚动上下文。

问题根源拆解 #

Sticky定位生效的前提是：元素的父级容器不能有overflow: auto/scroll/hidden属性，也不能有transform、filter这类会创建新堆叠上下文的样式，同时滚动行为要发生在sticky元素的上级上下文（通常是浏览器视口）。

当你把组件移到根组件时，根容器的样式没有这些限制，所以sticky正常工作；但路由加载的子组件，往往会因为路由容器的布局设置（比如很多项目会给根路由容器加height: 100%和overflow: auto），让滚动上下文变成了路由容器，而非浏览器视口，导致Mat Table的sticky表头无法相对于视口固定。

具体修复步骤 #

1. 检查并清理router-outlet的父容器样式
   打开你的根组件（app.component.html），找到包裹router-outlet的容器，确保它没有设置overflow: hidden或者height: 100vh+overflow: auto这类会劫持滚动的属性。如果确实需要容器内滚动，那要调整Mat Table的滚动上下文到该容器内。

2. 修正子组件的外层容器样式
   针对你的Sticky Table组件，修改CSS，确保外层容器不会干扰sticky：

   /* 移除可能限制滚动的overflow，或者明确配置滚动容器 */
   .basic-container {
     padding: 30px;
     /* 如果需要在容器内滚动，才设置以下两行，否则删掉 */
     /* height: calc(100vh - 60px); */
     /* overflow: auto; */
   }
   
   .mat-elevation-z8 {
     /* 绝对不能设置overflow:hidden，否则sticky表头会被截断 */
     overflow: visible;
   }
   
   table {
     width: 100%;
   }
   

3. 重置路由组件的宿主元素样式
   Angular会给每个路由组件生成一个宿主元素（比如<app-sticky-table>），这个元素的样式也可能干扰sticky，在组件的CSS里添加：

   :host {
     display: block;
     overflow: visible;
     /* 避免flex布局导致的高度计算问题 */
     min-height: 100%;
   }
   

4. 排查堆叠上下文干扰
   检查是否有父级元素设置了transform、perspective、filter属性，这些会创建新的堆叠上下文，让sticky相对于该元素而非视口固定，需要移除这些属性（如果不影响其他布局的话）。

验证效果 #

做完以上调整后，再滚动页面，Mat Table的表头应该就能正常固定在顶部了。本质上就是让sticky元素的滚动上下文回到你期望的区域（通常是浏览器视口），避免父容器的样式破坏这个上下文。

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