87,955
社区成员
发帖
与我相关
我的任务
分享求救。显示出来的div被挡住。
为什么旁边的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>
<!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>
...全文
请发表友善的回复…
发表回复
风中的少年 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;
}
这两段还是不太懂？为什么会遮住的？
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>
<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>
