z-index 在 IE 中不起作用答案

【问题标题】：z-index not working in IEz-index 在 IE 中不起作用
【发布时间】：2010-11-20 12:16:12
【问题描述】：

我有一个按钮，单击该按钮时我只生成一个包含一些复选框的 div。如果用户选中需要的复选框，它会根据复选框的值生成一个 iframe，并且 div 会消失。它位于按钮的正下方。到目前为止，它的工作正常。如果用户再次单击该按钮，则放置的 div 位于框架后面。请帮我让它在框架上方可见。我使用过 z-index，它在 firefox 中工作 - 但我无法在 IE 中制作它..

请帮我解决这个问题。

谢谢
普雷文 j

【问题讨论】：

你的IE版本是多少？
我已经测试了 IE 6 和 IE 7

标签： javascript html iframe dhtml

【解决方案1】：

IE 和 z-index 存在已知问题。您首先使用的是哪个版本的 IE？这也有帮助吗？它看起来相关，您可能需要启动代码才能解决此问题 -> http://www.webmasterworld.com/css/3337315.htm

【讨论】：

【解决方案2】：

当 div 出现时将 iFrame 的 zIndex 改为负值，当 div 消失时将其改为正值。

这可能会对你有所帮助。

INFO: How the Z-index Attribute Works for HTML Elements

【讨论】：

【解决方案3】：

你为什么不使用

#layer
{
 visibility:hidden;
}

然后改成可见再隐藏，下面的函数改css

function changecss(theClass,element,value) {
     var cssRules;
     var added = false;
     for (var S = 0; S < document.styleSheets.length; S++){
    if (document.styleSheets[S]['rules']) {
      cssRules = 'rules';
     } else if (document.styleSheets[S]['cssRules']) {
      cssRules = 'cssRules';
     } else {
      //no rules found... browser unknown
     }
      for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
       if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
        if(document.styleSheets[S][cssRules][R].style[element]){
        document.styleSheets[S][cssRules][R].style[element] = value;
        added=true;
        break;
        }
       }
      }
      if(!added){
      if(document.styleSheets[S].insertRule){
              document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
            } else if (document.styleSheets[S].addRule) {
                document.styleSheets[S].addRule(theClass,element+': '+value+';');
            }
      }
     }
    }

像这样调用这个函数

javascript:changecss('#layer','visibility','visible');<br>
javascript:changecss('#layer','visibility','hidden');

【讨论】：