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

Bắt đầu bằng cách mở bản tái hiện StackBlitz được liên kết và kiểm tra src/app/app.component.html, tập trung vào các phần tử mat-header-row và các chỉ thị sticky. Tái hiện cả hai trường hợp đã báo cáo, sau đó truy vết hành vi sticky của bảng Angular CDK/Material. Hoàn tất khi các cột sticky vẫn ở đúng vị trí và một tiêu đề sticky colspan giữ các cột mà nó trải rộng ở trạng thái sticky.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.