元素上方的角度材料覆盖

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

一种可能的解决方案是将cdk-overlay-container css类更改为以下内容：

return str[0] == end[0] && str[1] == end[1];

Here is a fork of your stackblitz with my suggestion.

Answer 2

好的。我发现这行得通。

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