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

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.

Written by the indexing model from the issue text.