Q:

z-index only applies to previous children?

I have this bar graph made with html/css/jquery, when you hover a bar you get more info. This "pop up" only gets on top of the previous bars but no the following ones?
Why?
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;
}

More info here:
http://jsfiddle.net/4PNmD/2/

A:

All of #bar's li children share the same z-index. So as they're being added in the DOM, they're seemingly stacking on top of one another semantically. You could add
#bars li:hover {
  z-index: 10;
}

to get it function properly.

