css - z-index 只适用于以前的 child ？

Question

我有这个用 html/css/jquery 制作的条形图，当您将鼠标悬停在条形上时，您会获得更多信息。这个“弹出窗口”只会出现在前面的条形图之上，而不会出现在后面的条形图上方？为什么？

HTML

<li>
    <div style='height:87%' class='graphs'>
        <span class='info'>2014-05-07 downloads: 461</span>
    </div>
</li>

CSS

#bars li {
    display: table-cell;
    vertical-align: bottom;
    z-index:1;
    position:relative;
}

#bars li .graphs{
    border-radius: 5px 0px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px;
    background-image: linear-gradient(to bottom, #32CD32 0%, #228B22 100%);
    background-clip: content-box;
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display:none;       
    opacity: 0.8;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
     transition: opacity 1s ease-in;        
    z-index:1;
    cursor:pointer;
    position:relative;
}

#bars li .graphs:hover{
    -webkit-transition: margin-bottom 1s,opacity 1s ease-out, -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
    transition: margin-bottom 1s, opacity 1s ease-out, transform 1s;
    margin-bottom: 20px;
    filter: alpha(opacity=100);
    opacity: 1;

}
#bars li .graphs span.info{
    display:none;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
    background-color:rgba(240, 232, 232, 0.9);
    position:absolute;
    top:0px;
    left:-100px;
    z-index:3;
    width: 100px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 1px 3px;
}

更多信息在这里:

http://jsfiddle.net/4PNmD/2/

Answer 1

#bar 的所有 li 子级共享相同的 z-index。因此，当它们被添加到 DOM 中时，它们似乎在语义上相互堆叠。你可以添加

#bars li:hover {
  z-index: 10;
}

使其正常运行。