Angular 15更新后position: sticky失效问题求助

问题分析 #

Angular Material 15在全局样式、CSS优先级和布局模型上有不少变更，你的问题大概率是以下两个原因导致：

1. 粘性表头的position: sticky生效条件被破坏——父容器可能被新增的Material样式设置了overflow属性，或者原有inline样式的优先级被覆盖。
2. Material 15的默认样式与你项目中使用的Bootstrap类（table、table-hover等）产生冲突，导致全局CSS异常。

具体解决方案 #

修复粘性表头失效 #

1. 调整父容器滚动配置
   粘性定位要求父容器不能随意设置overflow: hidden/auto/scroll，除非你明确要在该容器内实现滚动。给表格包裹一个专用容器，并设置滚动规则：

   <div class="row">
     <div class="col-12">
       <!-- 添加专用滚动容器 -->
       <div class="table-scroll-container">
         <table id="drawItemsGrid" *ngIf="budgetService.Budget" class="table table-hover table-sm budget-table">
           <thead style="position: sticky; top: 0; z-index: 999; background-color: #ffffff;">
             <tr>
               <!-- 原有表头内容保持不变 -->
             </tr>
           </thead>
           <!-- tbody内容 -->
         </table>
       </div>
     </div>
   </div>
   

   对应的CSS：

   .table-scroll-container {
     overflow-y: auto;
     max-height: 80vh; /* 根据页面需求调整高度 */
   }
   

   注意：必须给thead设置background-color，否则滚动时表头会透显下方内容。

2. 优化粘性定位的层级
   移除tr上的inline样式，将sticky属性移到thead上——thead作为表格的头部容器，定位稳定性远高于tr，也能避免Material样式对行元素的干扰。

解决全局CSS样式异常 #

1. 提升自定义样式优先级
   利用组件宿主选择器或深度选择器，确保你的自定义样式覆盖Material的默认样式：

   /* 假设你的组件选择器是app-budget-table */
   app-budget-table .budget-table {
     border-collapse: collapse; /* 修复表格边框异常 */
   }
   
   app-budget-table .budget-table th {
     /* 自定义表头样式，比如文字对齐、内边距等 */
     text-align: center;
     padding: 0.5rem;
   }
   

   若需要穿透组件样式隔离，可使用:host ::ng-deep（Angular 15仍支持）：

   :host ::ng-deep .budget-table tbody tr:hover {
     background-color: #f5f5f5; /* 修复hover样式失效 */
   }
   

2. 排查Material全局样式冲突
   检查angular.json中是否引入了Material的全局样式文件（比如@angular/material/prebuilt-themes/indigo-pink.css），若你的项目同时使用Bootstrap，可能需要调整样式加载顺序——将Bootstrap样式放在Material样式之前，避免被覆盖。

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