iframe z 索引下拉菜单

发布于 2024-09-08 21:03:34 字数 522 浏览 2 评论 0原文

由于我网站的结构，我被迫使用 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 和 z-index:10000 但我无法让它重叠在图像上。这些图像的 z-index 远小于 10000。请问有什么建议吗？

原文

Due to the structure of my website, I am forced to use a iframe to display the dropdown menu html file. if not, I am not able to see the dropdown in IE. Here is the code I am using:

<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>

Now the problem is that the dropdown is hiding behind the other images on the website. I have specified position:relative and z-index:10000 but I cannot get it to overlap on the images. The z-index of these images is much less than 10000. Any suggestions please?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深居我梦 2024-09-15 21:03:34

如果您的图像位于 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>

这将附加你的下拉内容。将 html 放入 div

if your images are outside of your iFrame, of course your dropdown menu will not show up since you are trying to tell the dropdown menu to go out of its windows. iframe is a different window inside your html, therefore any overflow of the window will never go out, elements inside the iframe is not affected with the z-index.

what you could do is, if your http://website.com/dropdown.html has the dropdown content only, you can call it by jQuery

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


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

this will append the content of your dropdown.html into the div

回复收藏 0 原文