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](https://stackblitz.com/edit/cdk-table-multi-row-heading-sticky-column?file=src%2Fapp%2Fapp.component.html)

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

まずリンクされた StackBlitz の再現を開き、src/app/app.component.html を調べます。複数の mat-header-row 要素と sticky ディレクティブに注目してください。報告された両方のケースを再現してから、Angular CDK/Material テーブルの sticky 動作を追跡します。sticky 列が正しい位置に残り、sticky colspan ヘッダーがまたがる列を sticky に保てれば完了です。

索引モデルが issue の本文から書いたものです。