IE 6.0 z-index 问题答案

【问题标题】：IE 6.0 z-index issueIE 6.0 z-index 问题
【发布时间】：2010-02-24 00:53:54
【问题描述】：

我在 IE 6.0 中遇到了 CSS 的 Z-index 属性问题

HTML

<div id="banner"></div>

CSS

#banner{
  background:url(pix/banner.PNG) top no-repeat;
  z-index = -1;
}

在 IE 6.0 中，它会在女孩的额头上显示一条线，显示在页面顶部的横幅中。在其他浏览器中，线路不来。我该如何解决这个问题？

请帮帮我。

谢谢德维什M

【问题讨论】：

【解决方案1】：

真的没有理由将女孩分成不同的图像。

只需使用单个图像，然后将其相对于包装器的右上角定位

#banner{
    background:url(pix/girl.PNG) top no-repeat; /* where girl is the whole girl */
    position:relative;
    top:0;
    right:150px;
}

然后确保位于您的标题 div 下方

【讨论】：

【解决方案2】：

Z-index 对静态定位的元素没有影响，因此您需要将 css position 属性设置为其他值，例如 relative，但我认为您不应该在此使用 z-index案例。

虽然你可以尝试这样的快速修复：

   * html #banner { margin-top: -1px; }

上述技巧仅适用于 MSIE6。

【讨论】：

【解决方案3】：

尝试将线条的标记放在女孩的标记之前，并使用 css 放置两者。它通常在类似情况下对我有用。

【讨论】：

【解决方案4】：

对于 Z-Index，请确保使用从 1 开始的数字。

如果您在使用某个元素时遇到问题，请尝试为其赋予 Position 属性，并为其父元素赋予 Position 和 Z-Index。

【讨论】：

【解决方案5】：

z-index 仅适用于定位元素。

另外，您只能交换同一元素所包含的元素的深度 - 嵌套元素（一个在另一个中）不能跳出它们的嵌套！

【讨论】：