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

Commencez par ouvrir la reproduction StackBlitz liée et inspectez src/app/app.component.html, en vous concentrant sur les multiples éléments mat-header-row et les directives sticky. Reproduisez les deux cas signalés, puis suivez le comportement sticky de la table Angular CDK/Material. C’est terminé lorsque les colonnes sticky restent à la bonne position et qu’un en-tête sticky colspan maintient sticky les colonnes qu’il couvre.

Rédigé par le modèle d'indexation à partir du texte de l'issue.