IE7 Z索引分层问题
我已经隔离了IE7的z-index错误的一个小测试用例，但不知道如何解决它。 我一直在玩z-index 。
在IE7中z-index有什么问题？
测试CSS：
input { border: 1px solid #000; } div { border: 1px solid #00f; } ul { border: 1px solid #f00; background-color: #f00; list-style-type: none; margin: 0; padding-left: 0; z-index: 1000; } li { color: #fff; list-style-type: none; padding-left: 0; margin-left: 0; } span.envelope { position: relative; } span.envelope ul { position: absolute; top: 20px; left: 0; width: 150px; }
测试HTML：
<form> <label>Input #1:</label> <span id="envelope-1" class="envelope"> <input name="my-input-1" id="my-input-1" /> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </span> <br><br> <label>Input #2:</label> <span id="envelope-2" class="envelope"> <input name="my-input-2" id="my-input-2" /> </span> </form>
Z指数不是一个绝对的测量。 只要各个元素属于不同的堆栈上下文 ，z-index：1000的元素可能位于具有z-index：1的元素之后。
当您指定z-index时，您将指定它相对于同一个堆叠上下文中的其他元素，尽管CSS规范的Z-index段落表示仅为具有z-index的定位内容创建新的堆叠上下文auto （意味着你的整个文档应该是一个单一的堆栈上下文），你确实构建了一个定位跨度：不幸的是，IE7将定位的内容解释为一个新的堆栈上下文。
总之，尝试添加这个CSS：
#envelope-1 {position:relative; z-index:1;}
或者重新设计文档，使得你的跨度没有位置：相对的：
<html> <head> <title>Z-Index IE7 Test</title> <style type="text/css"> ul { background-color: #f00; z-index: 1000; position: absolute; width: 150px; } </style> </head> <body> <div> <label>Input #1:</label> <input><br> <ul><li>item<li>item<li>item<li>item</ul> </div> <div> <label>Input #2:</label> <input> </div> </body> </html>
有关此错误的类似示例，请参阅http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ 。 给出一个父元素（在你的例子中是envelope-1）一个更高的z-index工作的原因是因为那么envelope-1（包括菜单）的所有孩子将覆盖所有的envelope-1（特别是envelope-2）的兄弟。
尽管z-index可以让你明确地定义重叠的方式， 即使没有z-index，分层顺序也是明确的 。 最后，IE6有一个额外的错误，导致选择框和iframe漂浮在一切之上。
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); });
“在IE定位的元素产生一个新的堆栈上下文，从z-index值为0开始。因此，z-index不能正常工作”。
尝试给父元素一个更高的Z-index值（甚至可以比孩子的Z-index值本身更高）来修复该错误。
我遇到了这个问题，但是在一个需要修改HTML的大型项目中，这个问题变成了一个问题，所以我正在寻找一个纯粹的css解决方案。
通过放置position:relative; z-index:-1 position:relative; z-index:-1在我的主体内容我的标题下拉内容突然显示在ie7中的主体内容（它已经在所有其他浏览器和ie8 +中没有问题显示）
这个问题是当时禁用所有的悬停和点击元素中的所有内容与z-index:-1所以我去了整个页面的父元素，并给它一个position:relative; z-index:1 position:relative; z-index:1
其中解决了问题并保留了正确的分层功能。
感觉有点哈克，但按要求工作。
我发现我必须在ie7特定的Styelsheet上放置一个特殊的z-index指定：
div {z-index：10; }
对于无关div的z-index（如nav），要显示在滑块上方。 我不能简单地添加一个z-index到滑块div本身。
如果前面提到的父节点中较高的Z索引不符合您的需求，您可以创建替代解决方案，并通过IE条件注释或使用Modernizr提供的（更理想的）特征检测将其定位到有问题的浏览器。
Modernizr的快速（和明显的工作）测试：
Modernizr.addTest('compliantzindex', function(){ var test = document.createElement('div'), fake = false, root = document.body || (function () { fake = true; return document.documentElement.appendChild(document.createElement('body')); }()); root.appendChild(test); test.style.position = 'relative'; var ret = (test.style.zIndex !== 0); root.removeChild(test); if (fake) { document.documentElement.removeChild(root); } return ret; });
它看起来不像一个错误，只是为了不同的CSS标准的理解。 如果外部容器没有指定z-index，但是内部元素指定了更高的z-index。 所以容器的兄弟可能覆盖高Z指数元素。 即使这样，它只发生在IE7，但IE6，IE8和Firefox是好的。
在一般的IE6中，某些UI元素是通过本地控件实现的。 这些控件呈现在一个完全独立的阶段（窗口？），并且总是出现在任何其他控件之上，而不管z-index如何。 选择框是另一个这样的问题控制。
解决此问题的唯一方法是构建IE呈现为单独的“窗口”的内容 – 即，您可以将选择框放置在文本框上，或者更有用的是iframe。
总之，为了让IE放置在上面的内置UI控件上，你需要在菜单的iframe中放置“on-hover”。
这应该已经在IE7中修复（请参阅http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ），但也许你运行在某种兼容模式？
这个错误似乎是一个单独的问题，而不是标准的单独的堆栈上下文IE错误。 我有一个类似的问题与多个堆叠输入（本质上是一个表中每行自动完成）。 我找到的唯一解决方案是给每个细胞减少z-索引值。
如果你想创建下拉菜单，并有z-index的问题，你可以通过创建z-index相同的值（例如z-index：999）来解决它。只要把z-index放在父子div和这将解决问题。 我解决了这个问题。 如果我把不同的z索引，当然，它会显示我的孩子div在我的父div，但是，一旦我想从菜单选项卡移动到子菜单的div（下拉列表），它消失…然后我把z – 索引相同的价值，并解决问题..
我解决了它通过使用IE7（其工具栏）的开发人员工具，并添加一个负的z索引到div的容器，将低于其他股利。
