紧急！！关于鼠标滑过弹出层的Z-index [复制链接]

7yeee　楼主

帖子: 178
体力: 424
威望: 0
居住地: 广东省珠海市

发表于 2009-5-21 10:38:08 |显示全部楼层

求教：现在弹出层里面的文字被下一幅图片挡住了，我想要的是弹出层完全显示（遮住下一幅图片）。我想应该是z-index的问题，应该怎样设置呢？

我是初学爱好者，各位大侠帮帮忙，紧急！

/*弹出层开始*/
.tooltips{
position:relative; /*这个是关键*/
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
}
.tooltips span{
display: none;
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:0px;
left:137px;
width:200px;
border:1px solid #333333;
background-color:#FFFFCC;
padding:0px;
color:black;
padding:10px;
}
.zyzP{
position:relative;
width:152px;
height:158px;
float:left;
margin:0 8px 0 0;
}

.name{font:13px "宋体";}
.zyzziliao{ font:13px/22px "宋体"; text-align:left;}
.zyzP a{ text-decoration:none;}
/*弹出层结束*/
-->
</style>

<body>
<div class="zyzH">
			
			    <div class="zyzP">
                     <a class="tooltips" href="#tooltips">
                         <img src="http://p3.images22.51img1.com/6000/fanmaiweixiao/34373030c61edd25e7847fa3de98890a.jpg" style="border:0;">
                              <span class="zyzziliao">
                                    <b>人 名</b>
                                    <br />
                                    这里是弹出层里的文字，别被挡住了啊，求你了！                              </span>
                     </a>
                     <span class="name">人名（博客）</a></span>
				</div>

<div class="zyzP">
                     <a class="tooltips" href="#tooltips">
                         <img src="http://p3.images22.51img1.com/6000/fanmaiweixiao/34373030c61edd25e7847fa3de98890a.jpg" style="border:0;">
                              <span class="zyzziliao">
                                    <b>人 名</b>
                                    <br />
                                    这里是弹出层里的文字，别被挡住了啊，求你了！                              </span>
                     </a>
                     <span class="name">人名（博客）</a></span>
				</div>

<div class="zyzP">
                     <a class="tooltips" href="#tooltips">
                        <img src="http://p3.images22.51img1.com/6000/fanmaiweixiao/34373030c61edd25e7847fa3de98890a.jpg" style="border:0;">
                              <span class="zyzziliao">
                                    <b>人 名</b>
                                    <br />
                                    这里是弹出层里的文字，别被挡住了啊，求你了！                              </span>
                     </a>
                     <span class="name">人名（博客）</a></span>				</div>

<div class="zyzP">
                     <a class="tooltips" href="#tooltips">
                         <img src="http://p3.images22.51img1.com/6000/fanmaiweixiao/34373030c61edd25e7847fa3de98890a.jpg" style="border:0;">
                              <span class="zyzziliao">
                                    <b>人 名</b>
                                    <br />
                                    这里是弹出层里的文字，别被挡住了啊，求你了！                              </span>
                     </a>
                     <span class="name">人名（博客）</a></span>				</div>

</div>
</body>

提示：您可以先修改部分代码再运行

[ 本帖最后由 7yeee 于 2009-5-21 10:46 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报