Internet Explorer 中的 z-index 错误答案

【问题标题】：z-index error in Internet ExplorerInternet Explorer 中的 z-index 错误
【发布时间】：2013-11-19 06:05:25
【问题描述】：

我有两个尺寸相同的 div。一个 div 放置在另一个上。每当我需要反向时，我为另一个 div 分配了 z-index。它在 chrome 中运行良好。但在 Internet Explorer 中，z-index: -1 元素被完全隐藏。为什么会这样？我用最新的 Internet Explorer 10 对此进行了测试。你们之前有没有发生过这种情况？

【问题讨论】：

嗯，你对一个负 z-index 的元素有什么期望呢？ negative 索引意味着，它位于父元素的后面（如果没有在其上声明 z-index 的特定值） - 因此它当然是完全隐藏的。
旧 IE 版本确实存在z-index 的问题。较新的 IE 版本应该没问题，但是如果您处于兼容模式或怪癖模式，您可能仍然会得到旧式的行为。你能确认你的浏览器是什么模式吗？（使用 F12 调出开发工具一探究竟）
据说MSDN: "... A positive value positions the element above text that has no defined z-index, and a negative value positions it below. ..."

标签： html css internet-explorer google-chrome cross-browser

【解决方案1】：

将 z-index 保持为正数。我会给你的元素分配一个默认的 z-index，然后有一个你添加到其中一个或另一个的显示类（使用 jquery 等），使 z-index 成为一个更高的数字。

.item { z-index: 10; }
.item.display { z-index: 20; }

【讨论】：