z-index问题internet explorer兼容模式和7答案

【问题标题】：z-index issue internet explorer compatibility mode and 7z-index问题internet explorer兼容模式和7
【发布时间】：2025-12-08 07:40:01
【问题描述】：

我的 Web 应用程序中有一个菜单用户控件，它在悬停时会将其菜单列表放在下面。我面临的问题是，在 IE 7 或 IE 10 兼容模式下，我页面上的图像在菜单下拉菜单上方可见，尽管将菜单下拉菜单的 z-index 属性设置为高。

请为此提供相关解决方案。

谢谢

【问题讨论】：

标签： asp.net css internet-explorer internet-explorer-7

【解决方案1】：

包含设置了position: relative 的菜单列表的父元素需要具有高于主体的z-index。 z-index 也可以在自上而下的基础上工作，因为在菜单之后声明的元素比它们之前的元素具有更高的 z-index。

tl;博士..

将菜单设置为比内容更高的元素

（内联样式示例）

<body>
    <div class="header">
    ...
    </div>
    <div class="nav" style="position:relative; z-index: 2">
        <ul>
           <li>
               Blah
               <ul class="drop-menu">
                   <li>drop item</li>
               </ul>
           </li>
        </ul>
    </div>
    <div class="content" style="position:relative; z-index:1">
        ...
    </div>
</body>

【讨论】：

嗨，这解决了我的问题，但我的页面上有一个 jquery UI 滑块，其位置相对已设置，我无法以任何方式移动它的 css。因此，上述解决方案不能适用于相同的情况。