要将浮层附加到点击的元素上，您可以使用Angular CDK（Component Dev Kit）库中的Overlay模块。以下是一个解决方案，其中包含代码示例：

1. 首先，确保您的项目中已经安装了Angular CDK。您可以使用以下命令安装它：

npm install @angular/cdk

2. 在需要使用浮层的组件中，导入Overlay模块：

import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

3. 在组件的构造函数中注入Overlay：

constructor(private overlay: Overlay) { }

4. 创建一个方法来处理点击事件，并在点击时显示浮层：

showOverlay(event: MouseEvent) {
  const overlayRef = this.overlay.create({
    positionStrategy: this.overlay.position().flexibleConnectedTo({ x: event.x, y: event.y }).withPositions([{
      originX: 'start',
      originY: 'top',
      overlayX: 'start',
      overlayY: 'top'
    }])
  });

  const portal = new ComponentPortal(YourOverlayComponent); // 将YourOverlayComponent替换为您的浮层组件

  overlayRef.attach(portal);
}

5. 在模板中添加一个点击事件处理程序，并在点击时调用showOverlay方法：

点击我显示浮层

请注意，上述代码示例中的YourOverlayComponent是您自己创建的组件，用于显示浮层的内容。您需要根据自己的需求创建并使用相应的组件。

这是使用Angular CDK将浮层附加到点击的元素上的基本解决方案。您可以根据需要进一步自定义和样式化浮层。