javascript - IE6 CSS Z 索引

Question

当鼠标悬停在所有内容上方时，我有一个图像样本列表。但是我发现在 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/

Answer 1

要修复许多 IE z-index 错误，请记住这条规则:

如果某物有位置属性，它总是需要一个 z-index

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