下拉列表的 z-index 不会与 iframe 一起运行

Question

我在页面上嵌入了谷歌日历（位于 iframe 中），

目前我正在尝试在 Chrome 中解决这个问题，但我希望它能够在所有情况下工作。

这是一般结构的简短摘要（实际代码更复杂）

<header>
<ul id="nav">
  <li>  <ul class="drop_down">
            <li>Nav item</li>
            <li>nav item</li>
        </ul>
    </li>
    <li>  <ul class="drop_down">
            <li>Nav item</li>
            <li>nav item</li>
        </ul>
    </li>
</ul>
</header>
<iframe />

iframe 的目的是重叠一点并出现在它的前面。下拉菜单应该出现在 iframe 前面。所以 z-index 层应该是从后到前：

1. header （只有背景图像才是最重要的）
2. iframe
3. drop down

iframe menu

我似乎无法做到这一点。我尝试在所有涉及的事情上使用position:absolute来非常具体。

这是问题页面的实时链接： 编辑：已删除链接，因为它与工作相关并已解决

预期的菜单行为位于该网站的主页上。

有什么建议吗？

Answer 1

Take z-index:1 off #header
Set #nav li ul z-index:100
Set the iframe z-index:50

问题是你的 iframe 的 zindex 是 1000，而你的菜单是 z-index:1