<!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。。。。
怎么能让绿块都是覆盖在红块上面？？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
父级的层级关系影响了，得改父级
CSS z-index 属性的使用方法和层级树的概念
参考：链接描述
每个p zindex都是9999
因为你的p元素始终是相对于li的，所以他的z-index只作用于它的父节点上