使用ng-grid的列菜单的z-index问题

Question

当我在同一页面上放置两个ng-grid并打开第一个网格的colum菜单时，第二个网格的标题重叠，如此屏幕截图所示：

我尝试将列菜单上的z-index设置为非常高的值，但它没有效果。我尝试了其他几种方法，但我显然遗漏了一些东西。有什么建议？ Plunker在这里展示了这种行为：

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Answer 1

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

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

demo

更好的方法（如评论中所建议的）是使用nth-child方法。扩展到3项：

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

demo

Answer 2

将z-index:0添加到具有类ngTopPanel ng-scope的第二个div中会有所帮助。 （在Chrome中测试）