子菜单回退到 jqGrid答案

【问题标题】：Sub menus fallback to jqGrid子菜单回退到 jqGrid
【发布时间】：2012-04-30 09:24:01
【问题描述】：

我在我的一个页面中使用Asp.NetjqGRid，这没有问题。但是我有一个下拉菜单，在这个阶段只包含几个子菜单，我遇到的问题是我的子菜单出现在jqGRid 后面。我不知道如何解决这个问题。我尝试将更高的z-index 赋予包装菜单的div，但没有帮助。这是图片

非常感谢任何建议。

谢谢

【问题讨论】：

标签： c# asp.net jqgrid

【解决方案1】：

因此，通过将以下样式设置为包含 jqGrid 的我的 div jgGridDiv 来解决问题。这是我的代码

#jqGridDiv
{
position:relative;
z-index:1;
}

现在工作正常。另外我为包含菜单的 div 设置了更高的 z-index，这非常重要。

【讨论】：

我在使用 css 菜单和 jqGrid 进行 IE8 测试时遇到了同样的问题。正如freebird所说，确保在包含菜单的div中放置一个高z-index。即使 ul/li 元素的 z-index 被最大化，它仍然会隐藏在网格后面。 div 容器是关键！（谢谢大家，stackoverflow 再次拯救了我）

【解决方案2】：

我建议您使用 Chrome 的开发者工具来检查创建 jqGrid 的 div 的“计算样式”。

我知道您描述的效果可能会出现两个问题：

IE兼容模式的使用。这是只能在 Internet Explorer 中存在的问题。由于这个问题，我尝试将<head> 放在每个具有jqGrid 行<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的页面上。它适用于所有 !DOCTYPE，但 HTML5 !DOCTYPE (<!DOCTYPE html">) 除外。更安全的是设置"X-UA-Compatible"

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=edge"/>
        </customHeaders>
    </httpProtocol>
</system.webServer>

（类似于here，但具有另一个值"X-UA-Compatible" HTTP 标头）

z-index 将从您放置 jqGrid 的某个父 div 继承。在这种情况下，您可以考虑使用将<table> 和寻呼机<div> 放在额外的“容器” div 内，并设置为 div position: relative; z-index: auto; 或position: relative; z-index: 1;（或其他小值）的样式。李>

【讨论】：

我有一个 div 名称 jqGridDiv 它是 jqGrid 的容器。那么我应该怎么做才能使用 z-index:auto ，我应该添加另一个包含 jqGridDiv 的 div
@freebird：为了能够设置z-index，div jqGridDiv 应该具有绝对或相对位置。所以尝试将style="position: relative; z-index: auto;" 添加到div jqGridDiv。如果没有帮助，您可以将 z-index: auto 更改为其他值，例如 z-index: 1。
@freebird：您使用哪种浏览器进行测试？你用铬吗？您是否使用开发人员工具检查了菜单的z-index 值和 jqGrid 的z-index？你的结果是什么？只有z-index 定义了页面的哪些元素可以在其他元素之上。我知道的所有情况都可以通过z-index解决。如果您在 Internet 上有测试演示，可以将 URL 发布给我。
我在 chrome、opera 和 ff 中也试过这个东西。我会正确检查这些组件的 z-index 并告诉你谢谢。
非常感谢您的帮助，我的问题得到了解决，我已经发布了我的答案。谢谢