开发者社区> 问答> 正文

为什么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。。。。
怎么能让绿块都是覆盖在红块上面??

展开
收起
杨冬芳 2016-06-06 12:00:32 2263 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    2019-07-17 19:28:11
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载