Question

我在鼠标悬停时有一个图像样本列表，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且位置相对，但这也隐藏了swatch。样本是动态生成的，我需要将各个工具提示放在样本本身附近，这就是我在列表中构建它的原因。

我还试图在swatch悬停时使用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错误，请记住以下规则：

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

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

Answer 2

通过CSS和轻微重组找到了一种方法：

at this link

Answer 3

ie6工作位置相对超过绝对值

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

IE6 CSS Z-index

3 个答案: