为什么z-index不起作用，设置了定位！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    ul{width:604px;list-style-type: none;margin-top:100px;margin-left:200px;}
    li{width:121px;height:121px;position: relative;z-index:1;float:left;margin-right: 30px;background:red;margin-bottom:20px;}
    div{width:120px;height:600px;background:green;position:absolute;top:-200px;left:0;display: none;z-index:9999;}
    </style>
    <title>插入新闻</title>
    <script>
    window.onload=function(){

        var oLi=document.getElementsByTagName('li');

        for(var i=0;i<oLi.length;i++){
            oLi[i].onmouseover=function(){
                this.getElementsByTagName('div')[0].style.display='block';
            }
            oLi[i].onmouseout=function(){
                this.getElementsByTagName('div')[0].style.display='none';
            }
        }


}
    </script>
</head>
<body>

    <ul>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>

    </ul>

</body>
</html>

为什么上面一排鼠标放在li上面绿块被下面红块盖住了，而下面一排却又是正常的没有被上面一排盖住，设置了定位，以及z-index。。。。
怎么能让绿块都是覆盖在红块上面？？

参考：链接描述

每个div zindex都是9999


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<style>
ul{width:604px;list-style-type: none;margin-top:100px;margin-left:200px;}
li{width:121px;height:121px;position: relative;float:left;margin-right: 30px;background:red;margin-bottom:20px;}
div{width:120px;height:600px;background:green;position:absolute;top:-200px;left:0;display: none;}
</style>
<title>插入新闻</title>
<script>
window.onload=function(){

    var oLi=document.getElementsByTagName('li');

    for(var i=0;i<oLi.length;i++){
        oLi[i].onmouseover=function(){
            this.getElementsByTagName('div')[0].style.display='block';
            this.getElementsByTagName('div')[0].style.zIndex=9999;
        }
        oLi[i].onmouseout=function(){
            this.getElementsByTagName('div')[0].style.display='none';
        }
    }
}

</script>
</head>
<body>
<ul>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>

</ul>
</body>
</html>

因为你的div元素始终是相对于li的，所以他的z-index只作用于它的父节点上

父级的层级关系影响了，得改父级
CSS z-index 属性的使用方法和层级树的概念

【热门文章】