javascript - 为什么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;}
    p{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('p')[0].style.display='block';
            }
            oLi[i].onmouseout=function(){
                this.getElementsByTagName('p')[0].style.display='none';
            }
        }


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

    <ul>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>
        <li>
            <p></p>
        </li>

    </ul>

</body>
</html>

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

PHP中文网2818 days ago568

<!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;} p{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('p')[0].style.display='block'; this.getElementsByTagName('p')[0].style.zIndex=9999; } oLi[i].onmouseout=function(){ this.getElementsByTagName('p')[0].style.display='none'; } } } </script> </head> <body> <ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul> </body> </html>

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

reply all(4)I'll reply