Question

我有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

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

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

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

Answer 2

这里

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

你做错了是把z-index设定为-5;对于div.info，它使得它在ul元素下，阻止你点击链接......

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

Answer 3

z-index仅在元素设置了'position'属性时才有效 - 所以尝试将'position：relative'放在具有z-index且尚未具有该属性的元素上。

此外，元素按照它们在源中出现的顺序自然堆叠。当元素重叠时，稍后出现的一次将堆叠在前面出现的那些之上。因此，如果从样式表中的所有内容中删除z-index属性，则还应该具有所需的结果。

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

3 个答案: