CSS z-index不适用于绝对div子

Question

我正在使用CSS创建一个图形，它几乎已经完成了但是我仍然坚持使用类graph-info的div的z-index，它隐藏在其他图形栏后面。

HTML

            <div id="graph">
            <li>
                <div class="graph-info">
                    <h4>23 June 2015</h4>
                </div><!--end of graph-info-->
            </li>
            <li>
                <div class="graph-info">
                   <h4>23 June 2015</h4>
                </div><!--end of graph-info-->
            </li>                
            <li>
                <div class="graph-info">
                    <h4>23 June 2015</h4>
                </div><!--end of graph-info-->
            </li>                
            <li>
                <div class="graph-info">
                    <h4>23 June 2015</h4>
                </div><!--end of graph-info-->
            </li>                
            <li>
                <div class="graph-info">
                    <h4>23 June 2015</h4>
                </div><!--end of graph-info-->
            </li>                   
            </div><!--end of graph-->

CSS

#graph{
    display:block;
    position:absolute;
    right:0px;
    bottom:0px;
    width:728px;
    height:auto;
    background:#666;
    margin:0px;
    padding:0px;
    border:0px;
    margin-bottom:10px;    
}
#graph li{
    display:inline-block;
    margin:0px 10px;
    padding:0px;
    width:20px;
    height:200px;
    background:#eee;
    vertical-align:bottom;
    z-index:1 !important;
}
#graph li:last-child{
 height:240px;
}
#graph li:nth-child(2) {
 height:230px;
}
#graph li .graph-info{
    display:inline-block;
    width:auto;
    height:auto;
    background:#ccc;
    z-index:2 !important;
}
#graph li .graph-info h4{
    display:block;     
    width:auto;
    height:auto;
    font:bold 12px/12px Tahoma, sans-serif;
    color:#000;
    border:none;
    margin:0px;
    margin-bottom:2px;
    padding:0px;
    white-space:nowrap;
}

jsfiddle

请参阅并建议任何可行的方法。

由于