Question

我有一个网页，其中包含一个iframe以及一个DHTML日历小部件。该页面以及iframe内的内容正确显示。问题是当我激活位于iframe附近的日历时，某些日历被iframe隐藏。

我试图通过使用javascript和CSS（Zindex，z-index）来操纵iframe的定位，但是iframe总是显示为页面上最顶层，阻碍了在同一个页面中呈现的任何父DHTML内容区域为iframe。我还将DHTML日历的css更改为值＆gt; 0并将小部件scriplet包装在具有高z-index值的div / span中，但没有运气。

Answer 1

iframe的z-index由IE在a weird way处理。如果你可以摆脱它，我建议你做，只是将内容嵌入常规Div。

如果你没有其他选择，那么请记住，IE6中的元素的z-index将是无限的。因此，堆叠的方法是使用具有更高zindexes的iframe，这样它将是无穷大vs无穷大+1。

这是vs堆叠的一个例子。两者都有无限的z-index，但你可以叠加它们。 Checkout Stu Nicholls code，这可能会有所帮助。

这是非常糟糕的想法，我的解决方法是避免在这个领域有其他领域。

Answer 2

你绝对可以用div来覆盖iFrame。

除非你在calandar div上使用position：relative，或position：absolute或position：fixed，否则你不能使用z-index。

您要做的是将calandar的“position”CSS属性更改为“relative”。如果您的iFrame具有正常的静态定位（意味着您没有添加任何特殊定位，这将起作用）。

如果您的iFrame具有“绝对”定位，您可能需要在calandar上执行“position：absolute”。

请参阅链接：http://resopollution.com/test/test.html

（适用于所有现代浏览器，包括IE6）

Answer 3

Google为“IE z-index bug”提供了各种类似问题的示例和解决方案。 html规范声明z-index应该是绝对的，但是在IE中，如果定位了父元素，则可以确定元素。在极端情况下，我必须从导致问题的元素追溯DOM树，并在任何父元素具有位置的情况下设置z-index属性，而不是在被遮挡的元素上设置（并且应该正确地使用它的z - 指数集）。 IE Developer工具栏可以帮助进行动态调试，如果它真的很乱，只需开始在树上设置z-index属性，直到找到使其看起来正确的那个。

Answer 4

我刚刚意识到问题似乎与MSXML以及IE如何转换XML文档有关。 XML具有XSLT样式表关联，浏览器使用该关联来转换XML文档。转换的输出是HTML文档。我不认为透露我的HTTP响应是XML是重要的，因为HTML最终会呈现，但它确实很重要。当IFRAME的源是HTML文档时，一切正常。 DHRML不在IFRAME范围内。但是当MSXML用于转换IFRAME内容时，就会出现问题。下面是一些说明问题的示例文件。对于DHTML组件我正在使用spiffycalendar小部件，但我想任何DHTML元素都会产生相同的结果。

<强> PARENT.HTML

IFRAME DHTML冲突示例

                var pickupdate=new ctlSpiffyCalendarBox("pickupdate", "mainF", "PICKUP_DATE","btnDate1","",1);
            </script>

父母窗口领域领域 FIELDpickupdate.writeControl（）; 领域领域领域保存更改

<强> Iframe.html的

<强> IFRAME.XSL ] GT; 测试XML DOC IFRAME内容

IE 7上iframe中的日历小部件位置

4 个答案: