bug(TABLE): 'sticky' directive positions column in wrong place when using more than one 'mat-header-row' on the table

Description

It is known that you can set sticky directive for more than one matColumnDef. It is also known that you can have more than one row of table heading (mat-header-row). However, with more than one mat-header-row the sticky feature breaks the table layout.

Reproduction

https://stackblitz.com/edit/cdk-table-multi-row-heading-sticky-column

Steps to reproduce:

1. Open the stackblitz, play a bit with sticky directive after reading expected and actual behavior.

Expected Behavior

1. Both columns are sticky - 1st and 2nd and in proper place
2. If sticky is applied to column with colspan, I expect both 'spanned' columns below it should be sticky

Actual Behavior

What behavior did you actually see?

1. 1st and 2nd columns are sticky, but 2nd column is missplaced (has moved to the right), covering another column named item.
   

2. If you add sticky to the 'grouping' header no. it only makes group header cell to be sticky - not the whole 2 collumns with 1st and 2nd values.

Environment

• Angular: 11.2.3
• CDK/Material: 11.2.2
• Browser(s): Chrome Version 88.0.4324.182 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Start by opening the linked StackBlitz reproduction and inspect src/app/app.component.html, focusing on the multiple mat-header-row elements and sticky directives. Reproduce both reported cases, then trace the Angular CDK/Material table sticky behavior. Done means sticky columns remain in the correct position and a sticky colspan header keeps its spanned columns sticky.