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

Question

当我将两个 ng-grids 放在同一个页面上并打开第一个的列菜单时，第二个网格的标题与其重叠，如下图所示:

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

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Answer 1

使用此 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