iframe 中的 z-index 问题

Question

我正在开发一个 asp.net Web 应用程序，它将在现有应用程序的 iFrame 中使用。应用需要支持IE8及以上版本。

该应用程序单独在 IE8 中看起来不错，但是一旦您在 iFrame 中呈现它，它似乎就会忽略 z-indexing。这基本上是我正在尝试使用的代码。

HTML:

<div id="top" class="block">
    <div id="clueTipOuter">
        <div class="show">
            Show ClueTip
        </div>
        <div class="clueTip">                                                            
            Some Text
        </div>   
    </div>
</div>
<div id="bottom" class="block">
    content and cluetip
</div>

CSS:

.block {
    background-color:lightgrey;
    border:thin solid;
    margin-bottom: 10px;
    position:relative;
}
.clueTip {
    display:none;
    background-color:white;
    position:fixed;
    z-index:20;
}

JavaScript:

$('.clueTipOuter').each(function {
    var show = $(this).find('.show');
    var clueTip = $(this).find('.clueTip');    

    show.mouseover(function () {
        clueTip.css({ 'left': event.clientX + 20, 'top': event.clientY - 15});
        clueTip.show(150);
    });

    $(this).mouseleave(function () {
        clueTip.hide(80);
    }
});

使用带有 iFrame 的 IE8，"clueTip" 最终显示在 "below" div 下方。我不知道为什么会这样。

我搜索了论坛并发现了很多 post 关于 z-indexing 的内容，但是 none 确实回答了我的问题。感谢您的帮助。

Answer 1

更新：

我认为 iframe 不可能导致这些不一致，结果证明不是...我们现有的应用程序默认以兼容模式显示，结果证明这是根本原因这个问题在 IE 中。

如果其他人遇到同样的问题，我想我会提供我的见解。

iframe 中的 z-index 问题

Issue with z-indexes within an iframe

css

iframe

jquery

z-index

internet-explorer-8