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

Question

当我在同一页上放置两个ng-grids并为第一个打开列菜单时，第二个网格的标题会重叠在它上面，如下图所示： 我已经尝试将列菜单的z-index设置为非常高的值，但没有效果。我尝试了几种其他方法，但显然错过了一些东西。有什么建议吗？演示这种行为的Plunker在此处： http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

- pmdarrow

---

你的菜单是否具有position: relative或position: absolute属性？ - Onion

@doitmyway - ng-grid的源代码在github上。这是列菜单模板的链接（如上所示）：https://github.com/angular-ui/ng-grid/blob/master/src/templates/menuTemplate.html - Alain

请查看官方论坛上的问题帖子中开发者的评论：https://github.com/angular-ui/ng-grid/issues/1035 - david.barkhuizen

Answer 1

使用以下CSS样式来强制第一个网格面板的z-index。

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

演示

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

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

demo

- vals

---

如果有超过两个格子堆叠在彼此下方，是否有更通用的解决方案？（例如：http://plnkr.co/edit/cD27SSMpXs3Q0genXzDk?p=preview） - Alain

理论上，所有的网格也可以使用相同的网格选项，因此一个合适的解决方案可能需要为每个网格元素应用唯一的ID，或者以某种方式利用CSS识别子元素编号的能力。(顺便点赞。我之所以问是因为我在使用pmdarrow.) - Alain

Answer 2

在具有类ngTopPanel ng-scope的第二个

中添加z-index:0可以解决问题（在Chrome中测试过）。

- HCS-Support

---

谢谢，但我需要的东西适用于不止两个重叠的网格。 - pmdarrow

将 z-index 设置为 0 可能会在使用显示叠加控件的各种 ng-grid 功能时产生其他意想不到的副作用。 - Alain

你说得有道理。我只是在看这个特定的情况，所以是的，最好使用另一种解决方案。 - HCS-Support