html - z-index 或类似 Material 设计精简版

Question

我正在为类似博客的系统设计一个后端，其中包含按版 block 、语言等筛选帖子列表的过滤器...过滤器是一个简单的下拉菜单，位于卡片的标题栏.当然，我希望这个列表位于所有内容的前面，但是当我设法溢出自己的卡片时，我无法将此菜单放在下面的卡片前面。许多选项在下一张卡片后丢失。

我已经尝试了很多选择，但现在我没有想法了。这就是我想要做的:

.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/

您需要点击第一张卡片右上角的菜单“FO”。

有什么办法可以做到吗？

Answer 1

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

More here at MDN .

一个简单的例子，看看对你有没有帮助!

.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>