绝对定位 DIV 内链接的 CSS z-index 跨浏览器问题

Question

请看http://jsfiddle.net/mithun/nuF2Q/1/

我有 HTML 结构

<div id='slider'>
    <ul>
        <li> 
            <a class='pride' href="i1.html"> Item 1 </a>
            <div class='info'> 
                <a class='roar' href="i1.html"> Description 2 </a>
            </div>
        </li>
        <li> 
            <a class='pride' href="i2.html"> Item 2 </a>
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 1 </a>
            </div>
        </li>
        <li>
            <a class='pride' href="i3.html"> Item 3 </a>
             <div class='info'> 
                <a class='roar' href="i1.html"> Description 3 </a>
            </div>
           </li>
        <li>
            <a class='pride' href="i4.html"> Item 4 </a> 
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 4 </a>
            </div>
         </li>
    </ul>
 <div>

和 CSS

#slider {
    width : 400px;
    height: 100px;
    border: 1px solid #bcd;
    background-color: #def;
    position:relative;
    z-index:0 !important;
}

#slider ul{
    margin:0px;
    padding:0px;
    list-style:none;
}

#slider ul li {
    margin:0px;
    padding:0px
    list-style:none;
    width:100px;
    z-index:10;
}
#slider ul li a.pride {
    color: #333;
    display: block;
    text-decoration: none;
    padding: 2px 0px 2px 10px;
}
#slider ul li.active a.pride,
#slider ul li:hover a.pride {
    background-color: #ffff7c;
}    

#slider ul li div.info {
    background-color: #9ab;
    border: 1px solid #ccc;
    display:none;
    position:absolute;
    right: 0;
    top:0;
    z-index:-5;
}
#slider ul li.active div.info,
#slider ul li:hover div.info {
    display:block;
}
#slider ul li div.info a.roar{
    color: #0a0;
    display:block;
    width: 280px;
    height: 80px;
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    z-index:10;
}

问题是 Div 内的链接不可点击，实际上它们在 UL 后面

--更新

它只发生在 Webkit/Gecko 浏览器中

Opera 和 IE 显示正确

Answer 1

z-index 仅在元素设置了 'position' 属性时才有效——因此请尝试将 'position: relative' 放在尚未具有该属性的 z-index 的元素上。

此外，元素自然会按照它们在源中出现的顺序堆叠。当元素重叠时，稍后出现的元素将堆叠在较早出现的元素之上。因此，如果您从样式表上的所有内容中删除 z-index 属性，您也应该得到想要的结果。

Answer 2

这在 Firefox 和 Chrome 中为我解决了这个问题：

<div id='slider'>
    <ul style="width:100px">

100px可能不是是最佳宽度。

Answer 3

这里

http://jsfiddle.net/nuF2Q/4/

您做错了将 z-index 设置为 -5；对于div.info，它位于 ul 元素下，阻止您点击链接...

所以我所做的就是将其更改为 5，然后将 a.prid 链接位置设置为相对并添加索引 6，以便与 div.info 元素重叠