CSS指纹扫描器动画问题求助：扫描器无法固定位置

• 核心问题：扫描器元素的定位参照错误，跟随父容器（扫描板）的动画同步移动。

• 具体修复方案：

  1. 将扫描器元素移出扫描板容器，放到与扫描板同级的父容器中，给这个父容器设置position: relative，作为扫描器的定位参照。
  2. 给扫描器设置position: absolute，通过top/left属性固定它在扫描板上方的位置，示例代码：

     .scanner {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       /* 保留原有的扫描动画样式 */
     }
     

  3. 若必须将扫描器留在扫描板容器内，需避免给扫描板设置transform/perspective/filter这类会创建新定位上下文的属性，或者把扫描板的动画拆分到内部的指纹图像元素上，让扫描板本身保持静态定位。

• 原理说明：当父元素添加transform属性（比如扫描板的缩放、移动动画）时，会生成新的包含块，内部绝对定位元素会以变换后的父元素为参照，导致扫描器跟着偏移。让扫描器脱离这个变换容器，就能独立固定位置。

内容的提问来源于stack exchange，提问作者ujuy