index issue with ng

 

When I put two ng-grids on the same page and open the colum menu for the first one, the second grid's header overlaps it as seen in this screenshot:

ng-grid截图

I've tried setting the z-index on the column menu to a very high value but it had no effect. I've tried several other approaches but I'm clearly missing something. Any suggestions? Plunker demonstrating the behaviour here:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

Force the z-index of the first grid panel with this CSS style 

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

demo

A better approach (as suggested in comments) is to use a nth-child approach. extended to 3 items: 

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

demo

Adding z-index:0 to the second div with the classes ngTopPanel ng-scope helps. (tested in Chrome)

链接地址: http://www.djcxy.com/p/78034.html

上一篇: 单词指向数组

下一篇: 与ng的索引问题