html - ng-grid的列菜单出现z-index问题

当我在同一页面上放置两个ng-grids并打开第一个的colum菜单时，第二个网格的标题与它重叠，如此屏幕快照所示:

我尝试将列菜单上的z-index设置为很高的值，但是没有效果。我尝试了其他几种方法，但显然缺少一些东西。有什么建议？ Plunker在这里演示了该行为:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

最佳答案

使用此CSS样式强制第一个网格面板的z-index

[ng-grid=gridOptions1] .ngTopPanel {
    z-index: 2;
}

demo

更好的方法(如评论中所建议)是使用第n个子方法。扩展到3个元素:

.gridStyle:first-child .ngTopPanel {
     z-index: 3;
}
.gridStyle:nth-child(2) .ngTopPanel {
     z-index: 2;
}

demo