The reason why transform affects position: fixed is that transform improves the status of the element, as explained in the W3C specification:
For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants
In elements whose transform is not none, the positioning will be affected.
Solution
Without affecting the layout, you can directly move the element to be positioned under the body:
| 1 2 3 4 5 |
|
If it is inconvenient to operate elements in components, you can use js, taking Vue as an example:
| 1 2 3 4 |
|