设置 Z 索引不起作用。容器后面的按钮 (HTML - CSS)答案

【问题标题】：set Z index not working. button behind a container (HTML - CSS)设置 Z 索引不起作用。容器后面的按钮 (HTML - CSS)
【发布时间】：2014-07-28 00:16:54
【问题描述】：

我使用 Metro css（windows 8 风格）并且遇到了问题。我有带有警报的容器（图中的蓝色），及以上，有'IT -CENTER'，如果我点击那里打开一个按钮。容器后面的按钮的问题.. 我尝试将容器的 Z 索引设置为 -1 ，但没有帮助。

带有按钮的下拉列表（IT-CENTER）： IT中心

              <li style="z-index:3"><a href="Login.aspx">התנתק</a></li>
           </ul>
        </div>

和容器（蓝色的）：

 <div id="alerts-container" style="z-index:-1">
         <div id="toast-example1" class="toast toasttext02 fade in">
            <button type="button" class="close" data-dismiss="alert"></button>
            <div class="pull-left">
               <div class="toast-object icon-info-4"></div>
            </div>
            <div class="toast-body" style="text-align:right">

（它没有结束标签..）

我该怎么办？

谢谢！！

【问题讨论】：

一个常见的错误是人们认为z-index 是全局的，其实不是，它是相对的。您能否在 jsFiddle 或类似文件中显示您的完整代码，以便我们修改？
这样做：style="z-index:-1; position:relative;"
相对容器消失

标签： javascript html css microsoft-metro metro-ui-css

【解决方案1】：

如果你设置z-index，你必须设置position:relative - 这是非常重要的事情，可能会导致你的错误
如果 1 方法没有帮助，您应该尝试将 z-indexes 设置为该按钮的可能父级（可以肯定地说我没有看到您的代码）

【讨论】：

【解决方案2】：

overflow: hidden;

到父 DIV 为我工作

【讨论】：

如果您可以编辑您的答案并解释您所显示的代码的作用，以及该代码为何/如何回答问题，它真的很有帮助。