如何在垫子网格上显示弹出窗口

Question

我在Angular上使用材质网格进行了网格布局。在链接上添加了弹出框。但是当我单击链接时，弹出框无法完全显示。我知道这是因为严格的div格。但是我认为可以解决通过更改z-index。我做到了，但仍然存在相同的问题。应该将其放在所有网格div的前面。但是我不知道该怎么办？

以下是我尝试的示例，其中包括网格和弹出窗口

https://stackblitz.com/edit/angular-nsqsbi-iwgfut?file=app/grid-list-overview-example.css

Answer 1

您的弹出窗口正在mat-grid-tile内部打开，其中已应用CSS overflow:hidden，导致弹出窗口隐藏，因此在overflow: unset上设置mat-grid-tile应该可以解决您的问题，因此请向容器中添加一些类网格

<mat-grid-tile colspan="2" rowspan="1" class="o-unset">
        <li style="text-align: center" class="list-unstyled">
            <a href="javascript:;" role="button" [ngbPopover]="popStatus" popoverClass="my-custom-class">
        My Link
        </a>                                                              
     </li> 
    </mat-grid-tile>

然后在组件CSS中

 .o-unset{
   overflow: unset;
  }

demo