材料设计精简版中的 z-index 或类似答案

【问题标题】：z-index or similar in material design lite材料设计精简版中的 z-index 或类似
【发布时间】：2015-09-24 16:54:39
【问题描述】：

我正在为类似博客的系统设计一个后端，其中包含按部分、语言等筛选帖子列表的过滤器...过滤器是一个简单的下拉菜单，位于卡片的标题栏.当然，我想把这个列表放在所有东西的前面，但是当我设法溢出他们自己的卡片时，我不能把这个菜单放在下面的卡片前面。许多选项都在下一张牌后面丢失。

我尝试了很多选择，但现在我的想法已经用完了。这就是我想要做的：

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

有什么办法吗？

【问题讨论】：

我不确定这是否会影响任何事情，但是应用 position: relative 会做些什么吗？
我试过了。什么都没有。
你试试z-index: -1;
是的，-1、-9999、+1 和 +99999。什么都没有。
制作一个 jsfiddle 让我们更好地了解您的问题

标签： html css material-design-lite

【解决方案1】：

z-index 仅在元素被定位时才有效。

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>

【讨论】：

【解决方案2】：

我知道这已经过时了，但我最近在 mdl 卡中使用 mdl 菜单时遇到了 overflow 和 z-index 的这些问题，我想我会发布对我有用的内容，因为这是 Google 上的最佳结果之一.

只需要更新.mdl-card如下：

.mdl-card {
  overflow: visible;
  z-index:auto;
}

And here is a working version of the jsfiddle you posted.

【讨论】：

【解决方案3】：

如果您使用z-index，则使用它的每个元素都必须有position:absolute

【讨论】：

我尝试为每个元素指定一个位置。没有什么变化。好吧，绝对位置会使整个设计崩溃，但不会改变这种不需要的行为。