层叠样式表/z-index

IE6/IE7 z-index 解决方法

在 IE7 及更低版本中，相对和绝对定位的元素的自动 z-index 为零。此外，IE 将 auto 的 z-index 评估为零。因此，位于不同容器中的两个绝对定位元素无法重叠。如果其中一个父元素的 z-index 为 1，那么它的子元素就可以与另一个容器的子元素重叠。对于下拉菜单，请提升当前悬停项目的 z-index，而不是依赖菜单本身的 z-index。

从最外层容器开始，为每个相对定位的 div 设置递减的 z-index 值，以便标记中的根 div 具有最高值，并且其中的任何绝对定位的 div 具有最低的 z-index 值，这样它们就不会在 IE6 中与静态 div 重叠。

任何具有 haslayout 的相对定位元素都会建立一个堆叠上下文。如果两个元素都是相对定位的，并且其中一个被设置为 z-index:1，那么如果它们在 IE6/7 中重叠，它将被隐藏在第二个 div 下方。

为了让模态对话框在 IE6 中重叠选择元素，请为绝对定位的 div 使用正 z-index 值和 overflow:hidden;。然后将一个空的 iframe 插入到条件注释中，作为绝对定位的 div 的子元素，并将其样式设置为 position:absolute; top:0; left:0; z-index:-1; filter:mask(); 以及定义的宽度和高度。这是有效的，因为在 iframe 背后的选择元素不会被 IE6 绘制，即使它不可见。

z-index 使用

每个 z-index 被指定为整数或其不透明度不等于 100% 的元素都会建立一个新的堆叠上下文，在这个上下文中，元素本身是其子元素的零 z-index，并且其子元素相对于彼此定位，但不能与容器外部的元素重叠。

如果一个相对定位的元素是 display:inline，那么它的 left/right 和 top/bottom 偏移量将基于它的容器，而不是堆叠上下文。

auto 的 z-index 意味着元素不会为其子元素创建零 z-index，因此它们的 z-index 值相对于页面上的其他元素。

如果两个或多个兄弟元素在其父元素中具有相同的堆叠级别，那么它们将按照它们在 HTML 标记中的出现顺序从后到前呈现。

如果你想要一个 div 中的相对定位元素与另一个 div 中的相对定位元素重叠，你必须提升整个 div 的 z-index，或者将内容合并到一个容器 div 中。

如果你想要一个元素绘制在所有其他元素之上，但你想要该元素的子元素位于所有其他元素的后面，请使该元素成为唯一的相对定位元素，然后使用负 z-index 定位子元素。

如果你想要一个边框颜色在相邻表格单元格上重叠，请给该单元格一个比其他单元格更高的 z-index。使用零边框宽度和更高的 z-index 来完全擦除边框。

建立堆叠上下文的元素将与相邻的浮动元素重叠，如果它们相交。

具有相同堆叠上下文的元素根据源代码顺序显示；最后添加的标签将与第一个添加的标签重叠。