IE6 CSS Z-index答案

【问题标题】：IE6 CSS Z-indexIE6 CSS Z-index
【发布时间】：2011-11-07 11:18:54
【问题描述】：

当鼠标悬停时，我有一个图像样本列表，一个 div 弹出窗口应该出现在所有内容之上。但是我发现在 IE6 中，div 弹出窗口位于弹出窗口之后生成的元素后面。它正确地位于弹出之前呈现的元素之上。

我所拥有的大致概念：

<ul>
     <li>
         <a href="#"><img src="image path to swatch"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
     <li>
         <a href="#"><img src="image path to swatch"></a>
         <div class="tooltip">TOOLTIP POPUP</div>
     </li>
 </ul>

我在页面上堆放了很多这样的 UL。

CSS 的大致概念

 ul li {
       width: 150px;
       height: 20px;
       position: relative;
 }
 div.tooltip {
       width: 300px;
       height: 300px;
       position: absolute;
       top: -20px;
       left: -20px;
       z-index: 1000;
       display: none;
 }

我尝试让父 li 的 z-index 为 -1 并且位置相对，但这也隐藏了样本。色板是动态生成的，我需要将各个工具提示定位在色板本身附近，这就是为什么我将它构建在一个列表中。

当样本悬停在上面时，我还尝试使用 javascript 增加 z-index，以便它高于一切，但这也没有奏效。例如：

 $('ul li').hoverIntent(
       function(){
    $('div.tooltip', this).css('z-index', '9000');
    $('div.tooltip', this).stop(true,true).show();
},
function() {
    $('div.tooltip', this).hide();
    $('div.tooltip', this).css('z-index', '1000');
});

想法不多了，请问有人可以帮忙吗？谢谢。

代码可以在 JS Fiddle 上看到：http://jsfiddle.net/melon/nUTgB/13/

【问题讨论】：

我知道这种回避你的问题，所以请原谅我，但是是时候放开IE6了。当你忘记它曾经存在时，你会感觉更快乐。
全世界不到 9% 的人仍在使用 IE6，其中大多数公司的员工由于访问限制甚至看不到您的网站。我同意 Nacimota，放弃 IE6 支持。
我希望我能！！！但不幸的是不允许:(
从您发布的代码来看，具体的div.tooltip 何时以及如何显示并不明显（现在总是有display: none）。您能否发送一个 jsfiddle 演示的链接，该演示实际上可以在现代浏览器中按预期运行？
我正在使用 hoverIntent jQuery 插件，但这与原生的悬停功能基本相同，这是调用显示和隐藏功能的地方。 JS Fiddle 链接可以在这里找到link 也更新了帖子

标签： javascript css internet-explorer-6 z-index

【解决方案1】：

要修复大量 IE z-index 错误，请牢记以下规则：

If something has a position attribute, it always needs a z-index

这对我进行浏览器测试有很大帮助。这意味着 LI 标签需要一个z-index: 1 集，因为它们具有position:relative 属性

【讨论】：

我已经尝试过了，但它似乎忽略了在工具提示之后呈现的元素
如果将 position:relative 和 z-index:1 添加到 UL 元素会发生什么？
在当前悬停的色板之后渲染的色板仍然出现在工具提示上方，此外现在呈现在列表之外的任何文本现在都出现在工具提示的顶部。

【解决方案2】：

ie6 在相对位置上工作超过绝对位置

https://stackoverflow.com/a/10280332/1312610

【讨论】：