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

Comienza abriendo la reproducción enlazada de StackBlitz e inspecciona src/app/app.component.html, centrándote en los múltiples elementos mat-header-row y las directivas sticky. Reproduce ambos casos reportados y, después, sigue el comportamiento sticky de la tabla de Angular CDK/Material. Se considera terminado cuando las columnas sticky permanecen en la posición correcta y un encabezado sticky colspan mantiene sticky las columnas que abarca.

Escrito por el modelo de indexación a partir del texto del issue.