z-index or similar in material design lite

Question

I'm designing a back-end for a blog-like system, with filters that sieve a list of posts by section, language, etc... The filter is a simple drop down menu, placed at a card's title bar. I want this list in front of everything, of course, but while I've managed to overflow their own card, I can't put this menu in front of the following card. Many options are lost behind the next card.

I've tried many options, but now I'm run out of ideas. This is what I'm trying to do:

.menuFilter {
    z-index:1; /* Higher z-index means upper position */
}
.mdl-card {
    overflow: visible; /* menus can leave their own box */
    z-index:0; /* Lower z-index means lower position */
}

JSFiddle: http://jsfiddle.net/dv0k3nos/1/

You need to click the menu "FO", at the top right of the first card.

There is some way to do that?

Answer 1

z-index only has an effect if an element is positioned.

More here at MDN.

A simple example, see if this help you.!

.menuFilter {
    z-index:1; /* Higher z-index means upper position */
    position:relative; /*--Position--*/
    padding:20px;
    width:100px;
    background:#1266ae;
    color:#fff;
}
.mdl-card {
    z-index:0; /* Lower z-index means lower position */
    position:relative;  /*--Position--*/
    background:#16acff;
    width:100px;
    padding:20px;
    top:-25px;
    left:10px;
}

<div class="menuFilter">menuFilter</div>
<div class="mdl-card">mdl-card</div>