css弹出式浮动层问题
底部的"123"虽然设置过z-index属性但是依然会被"撞"出浮动出的层下面.求解决<html><head><metahttp-equiv="Content-Type"...
底部的"123"虽然设置过z-index属性但是依然会被"撞"出浮动出的层下面.求解决
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>w</title>
<script type="text/javascript">
function shows()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='block';
f1.style.display='none';
}
function closed()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='none';
f1.style.display='block';
}
</script>
<style type="text/css">
.a123 { width:500pxx; height:300px; border:1px solid #ccc;}
#a { width:500px; height:198px; background:url(img/bg1.jpg) repeat-x; display:none; font-size:12px; cursor:default; z-index:999; }
#b { width:239px; height:29px; background:url(img/other_20.jpg) no-repeat; font-size:12px; line-height:29px; float:left; }
#b span { margin-left:25px; }
</style>
</head>
<body>
<div class="a123">
<div id="b" onmouseover="shows()" onmouseout="closed()"><span>选择区域</span></div>
<div id="a">显示层</div>
<p>123</p>
12345 </div>
</body>
</html>
上面的浮动层鼠标移上去时a层显示出来,b层隐藏.把"123"遮盖a在下面.但是目前的情况就是123会被显示在ab层下面而不是被覆盖掉了 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>w</title>
<script type="text/javascript">
function shows()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='block';
f1.style.display='none';
}
function closed()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='none';
f1.style.display='block';
}
</script>
<style type="text/css">
.a123 { width:500pxx; height:300px; border:1px solid #ccc;}
#a { width:500px; height:198px; background:url(img/bg1.jpg) repeat-x; display:none; font-size:12px; cursor:default; z-index:999; }
#b { width:239px; height:29px; background:url(img/other_20.jpg) no-repeat; font-size:12px; line-height:29px; float:left; }
#b span { margin-left:25px; }
</style>
</head>
<body>
<div class="a123">
<div id="b" onmouseover="shows()" onmouseout="closed()"><span>选择区域</span></div>
<div id="a">显示层</div>
<p>123</p>
12345 </div>
</body>
</html>
上面的浮动层鼠标移上去时a层显示出来,b层隐藏.把"123"遮盖a在下面.但是目前的情况就是123会被显示在ab层下面而不是被覆盖掉了 展开
2个回答
展开全部
因为你设浮动是不会脱离布局的，你把a层设为绝对定位就可以可以了
更多追问追答
追问
求修改后的方法具体代码.
加过了absolute也不行
追答
<script type="text/javascript">
function shows()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='block';
f1.style.display='none';
}
function closed()
{
var f=document.getElementById("a");
var f1=document.getElementById("b");
f.style.display='none';
f1.style.display='block';
}
</script>
<style type="text/css">
.a123 { width:500pxx; height:300px; border:1px solid #ccc;}
#a { width:500px; height:198px; background:url(img/bg1.jpg) repeat-x; display:none; font-size:12px; cursor:default; z-index:999; position:absolute;}
#b { width:239px; height:29px; background:url(img/other_20.jpg) no-repeat; font-size:12px; line-height:29px; float:left; border:1px solid black; }
#b span { margin-left:25px; }
</style>
</head>
<body>
<div class="a123">
<div id="b" onmouseover="shows()" onmouseout="closed()"><span>选择区域</span></div>
<div id="a">显示层</div>
<p">123</p>
12345
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以告诉我们你想要实现什么类型的效果吗？
把你的代码运行了一下，真心不清楚你想要什么效果。
把你的代码运行了一下，真心不清楚你想要什么效果。
更多追问追答
追问
上面的浮动层鼠标移上去时a层显示出来,b层隐藏.把"123"遮盖a在下面.但是目前的情况就是123会被显示在ab层下面而不是被a遮盖掉了
追答
试一下看看是不是你要的效果，样式放在head与head之间，代码放在body里面，图片自己随便找一个，但是宽度和高度要符合要求，不懂继续追问。当然用JS也是可以的。
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
border:none;
}
.test{
width:200px;
height:300px;
margin:0 auto;
}
.test a{
display:block;
position:relative;
}
.test a:hover{
text-decoration:none;
}
.test a img{
display:block;
}
.test a p{
display:none;
}
.test a:hover p{
display:block;
height:300px;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
font-size:12px;
color:#fff;
line-height:22px;
text-align:justify;
text-justify:inter-ideograph;
position:absolute;
top:0;
left:0;
_cursor:pointer;
}
</style>
<div class="test">
<a href="
百度" target="_blank" onfocus="this.blur()">
<img src="1.jpg" width="200" height="300" alt="" />
<p>这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这这里是介绍这里是介绍这这里是介绍这里是介绍这这里是介绍这里是介绍这这里是介绍这里是介绍这这里是介绍这里是介绍这里是介绍这里是介绍</p>
</a>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
