使用 z-index 在 Internet Explorer 中堆叠问题答案

【问题标题】：Stacking issue in internet explorer with z-index使用 z-index 在 Internet Explorer 中堆叠问题
【发布时间】：2012-06-11 07:40:41
【问题描述】：

我不太擅长 CSS，所以我无法让 IE 正确显示我的菜单栏。正如您在fiddle 中看到的那样，我有一个简单的栏，用户可以在其中单击他的用户名以显示一些选项。

这段代码在 chrome 和 firefox 中运行良好，但在 Internet Explorer 上却是这样：

如您所见，菜单在导航栏中打开，因此您只会看到第一个选项。

你能打开这个fiddle 告诉我我的代码有什么问题吗？

提前致谢！！

解决方案：

哇，这真的很奇怪，但它是 CSS 上的这一行！这就是它在小提琴中起作用的原因，因为我为示例放置了一个简单的背景。为了将来参考，如果您正在进行堆叠，切勿这样做：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#282828',GradientType=0 ); /* IE6-9 */

【问题讨论】：

【解决方案1】：

修改#user_menu的CSS如下：

top: 30px;

【讨论】：

【解决方案2】：

您需要将position: relative 添加到父项，并将position: absolute 添加到下拉列表。您可能还需要更改#user_menu 的top 属性，使其不与用户名重叠（大约20px 左右应该这样做）。