时间戳

首页 > 解决方案 > 元素上方的角度材质覆盖

angular - 元素上方的角度材质覆盖

问题描述

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

<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在附加元素上方而不是底部？

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

标签： angularangular-material

解决方案

行。我发现这行得通。

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

推荐阅读