元素上方的角度材质覆盖

Question

我正在尝试在目标元素下方附加一个叠加层并且它可以工作，但似乎我无法将它附加到目标元素的顶部。

<button (mouseenter)="openFusilliPanel()" (mouseleave)="closeFusilliPanel()">
   Hover to append
</button>

<!-- I would like to append it above this DIV element -->
<div cdkOverlayOrigin #tortelliniOrigin="cdkOverlayOrigin" #appendDiv style="background:pink;width:400px;height:100px;color:black;margin-top:100px;">Should append overlay on top of this element</div>

<!-- Template to load into an overlay. -->
<ng-template cdk-portal>
    <p style="background-color: mediumpurple;width:100px;" class="demo-fusilli"> Fusilli </p>
</ng-template>

来源

const positionStrategy = this.overlay.position().connectedTo(
    this.tortelliniOrigin.elementRef,
    { originX: 'start', originY: 'bottom' },
    { overlayX: 'start', overlayY: 'top' })
    .withFallbackPosition(
    { originX: 'start', originY: 'top' },
    { overlayX: 'start', overlayY: 'bottom' })
    .withFallbackPosition(
    { originX: 'end', originY: 'top' },
    { overlayX: 'start', overlayY: 'top' })
    .withFallbackPosition(
    { originX: 'start', originY: 'top' },
    { overlayX: 'end', overlayY: 'top' })
    .withFallbackPosition(
    { originX: 'end', originY: 'center' },
    { overlayX: 'start', overlayY: 'center' })
    .withFallbackPosition(
    { originX: 'start', originY: 'center' },
    { overlayX: 'end', overlayY: 'center' })
    ;
this.fusilliOverlayRef = this.overlay.create({ positionStrategy });
this.fusilliOverlayRef.attach(this.templatePortals.first);

如何使叠加层（紫色框）附加在粉色框的顶部？

演示链接：https://stackblitz.com/edit/overlay-demo-2nssno

我在想我正在使用connectedTo() 创建相对于附加元素的叠加层，我们如何将其设置为在附加元素上方而不是底部显示relative？

有谁知道如何在目标元素（粉红色）的（红色框）上方附加叠加层（紫色）？

Answer 1

好的。我发现这行得通。

        { originX: 'start', originY: 'top' },
        { overlayX: 'start', overlayY: 'bottom' })