IE Z-Index 问题答案

【问题标题】：IE Z-Index issuesIE Z-Index 问题
【发布时间】：2012-10-21 03:00:40
【问题描述】：

我遇到了经典问题，我的标题导航栏位于正文中的 iframe 下方，但我尝试使用 z-indexes 解决这个问题让我更加困惑，并且仍然遇到同样的问题：/ 这是我的设置：

<header style="z-index:2;">
....code....
<nav align="center" style="z-index:2;">
....nav....
</nav>
</header>
<section id="content" style="z-index:-1;">
<div class="block">
    <div class="main">
    <!--[if IE]>
<div style="z-index:-2;">
<iframe width="900" height="900" style="position:relative; z-index:-2;" src="http://www.flytheflagtexas.com/athens/magazine/latest/index.html" ></iframe>
</div>
<![endif]-->
....code....

为什么 z-index:-2 iframe 不会出现在任何东西下？这是页面：http://www.flytheflagtexas.com/athens/latest随意浏览代码

【问题讨论】：

可能重复以下问题：stackoverflow.com/questions/6242034/…
z-indexes 仅与容器相关。您的 -1 与 2 位于不同的块中
那么如何让标题块出现在节块之上？

标签： html css internet-explorer iframe

【解决方案1】：

z-index 仅在您指定用于布局组件的位置时才有效。否则它只是行不通。这意味着 z-index 适用于：定位元素

【讨论】：

@HemenAshodia：您应该为 iframe 的父 div 提供位置。顺便说一句，国王发布了问题，您在哪里尝试了解决方案。
在他的网站上我在我的电脑上进行了更改

【解决方案2】：

试试这个：

#nav{position:relative; z-index:2;}

对于框架

#content{position:relative;}

您不需要为底部元素指定 z-index 值，但可以，只需使其小于 2。

【讨论】：

【解决方案3】：

Z-index 只有在你使用时才能可靠地工作

position: relative;

或

position: absolute;

如果您没有在 CSS 中将位置设置为支持的值之一，z-index 将不会有任何效果。

【讨论】：