html - 下拉列表的 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. 标题(重要的只是背景图片)
2. 内嵌框架
3. 下拉

iframe 菜单

我似乎无法做到这一点。我尝试在涉及的所有内容上使用 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