Накладка углового материала над элементом

Question

Я пытаюсь добавить оверлей ниже целевого элемента, и он работает, но кажется, что я не могу добавить его на top целевого элемента.

<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 над присоединенным элементом вместо bottom?

Кто-нибудь знает, как добавить оверлей (фиолетовый) над (красной рамкой) целевого элемента (розовый)?

Answer 1

Хорошо. Я нашел, что это работает.

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