bug(material/table): cdkDrag of mat-header-cell styling broken when used with "sticky: true"

[brendanowens]

Reproduction

I believe that #21403 (released in 11.0.4) introduced this bug. I have included the same StackBlitz, once using 11.0.3, and once using 11.0.4, to demonstrate the bug that was introduced.

Steps to reproduce:

1. Using "@angular/material": "^11.0.4" or greater (I have also tested with 11.2.12 and 12.0.1 and the bug persists)
2. Set up a mat-table using cdkDrag on the mat-header-cell's
3. On the mat-header-row, set *matHeaderRowDef="displayedColumns; sticky: true"
4. Drag the column header and observe the styling of the header as it is being dragged

StackBlitz of issue: https://mat-table-sticky-after.stackblitz.io

Expected Behavior

The expected behavior is that the styling of the header remains next to the pointer as it is being dragged. This is the behavior PRIOR to 11.0.4.

See this StackBlitz of 11.0.3 for the expected behavior: https://mat-table-sticky-before.stackblitz.io

Actual Behavior

The behavior in ^11.0.4 is that the styling is shifted: https://mat-table-sticky-after.stackblitz.io

Environment

• Angular: >= 11.0.4
• CDK/Material: >= 11.0.4
• Browser(s): Chrome 90.0.4430.212
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 11.2.3

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}