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

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

我已经尝试将列菜单上的z-index设置为非常高的值,但它没有任何效果.我尝试了其他几种方法,但我显然遗漏了一些东西.有什么建议? Plunker展示了这里的行为:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

解决方法

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码