求救。显示出来的div被挡住。

Rni-L 2015-10-12 03:37:27
为什么旁边的li 会挡住显示出来的div?设置了z-index都不行。。。。求大神。






<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{
list-style:none;
}
li{
width:50px; height:50px; position:relative;
float:left; margin-right:20px; margin-top:20px;
background:red; top:10px; z-index:1;

}
#box div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;

}
#box{
width:660px;
height:250px;
border:solid 1px;

}

</style>

<script>
window.onload =function (){
var ali = document.getElementsByTagName("li");


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





}


</script>
</head>
<body>

<div id="box">
<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>
<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>
</div>
</body>
</html>
...全文
149 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
风中的少年 2015-10-12
  • 打赏
  • 举报
回复
之所以被遮住,是float:left 在作怪。。。因些才用楼上的方法,以让相对元素不是float之后的
Rni-L 2015-10-12
  • 打赏
  • 举报
回复
li>div{
width:100%; height:100%; position:relative;


}
#box li>div>div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;

}

这两段还是不太懂?为什么会遮住的?
slwsss 2015-10-12
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{
list-style:none;
}
li{
width:50px; height:50px;
float:left; margin-right:20px; margin-top:20px;
background:red; top:10px; z-index:1;

}
li>div{
width:100%; height:100%; position:relative;


}
#box li>div>div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;

}
#box{
width:660px;
height:250px;
border:solid 1px;

}

</style>

<script>
window.onload =function (){
var ali = document.getElementsByTagName("li");


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





}


</script>
</head>
<body>

<div id="box">
<ul>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
</ul>
</div>
</body>
</html>

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧