z-index issue with ng-grid's column menu

Question

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:

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

Answer 1

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

Answer 2

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