Question

由于我网站的结构，我被迫使用iframe来显示下拉菜单html文件。如果没有，我无法看到IE中的下拉列表。这是我正在使用的代码。

<iframe id="a"name="FRAMENAME" src="http://website.com/dropdown.html" width="1000" style="position:relative" background="#F3F0ED" style="z-index:10000" height="40" frameborder="0" scrolling="no" allowautotransparency=true></iframe>

现在的问题是，下拉列表隐藏在网站上的其他图片后面。我已指定position:relative and z-index:10000，但我不能让它在图像上重叠。这些图像的z-index远小于10000.有什么建议吗？

Answer 1

如果您的图片在iFrame之外，当然您的下拉菜单不会显示，因为您试图告诉下拉菜单离开它的窗口。 iframe是html中的一个不同窗口，因此窗口的任何溢出都不会消失，iframe中的元素不会受z-index的影响。

你可以做的是，如果你的http://website.com/dropdown.html只有下拉内容，你可以通过jQuery调用它

<div id="myDropDown">
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#myDropDown").load("http://website.com/dropdown.html");
    });    
</script>

这会将dropdown.html的内容附加到div

中

Answer 2

在“？”之后添加“wmode = transparent”

不记得!!设置属性下拉列表z-index。

iframe z-index下拉菜单

2 个答案: