当前位置：首页 → 问答吧 → 这个定位让我很纠结-ie6,7无效

这个定位让我很纠结-ie6,7无效

时间：2010-09-13

来源：互联网

我要让黑色背景div.twoMuse 悬浮在最上面
可.twoMuser属性z-index不管设置多大的值都是下方显示
FF,ie8正常 IE6,7无效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ list-style:none;margin:0;padding:0;} body{font:12px/180% 宋体,serif;background-color:#fff;} .goods_sider_l{width:185px;float:left;} .sider_l_tit{height:31px;line-height:33px;padding-left:10px;color:#fff;font-size:14px;background:url(../images/big_bg.jpg) no-repeat left -42px;overflow:hidden;} .leiDL{border:1px solid #E58A31;border-top:none;padding-top:10px;padding-bottom:10px;clear:left;} .leiDL dd{margin:0 6px;padding-bottom:4px;background:url(../../images/online.gif) repeat-x left bottom;} .leiDL dd.ddnone{ background:none;} .leiDL dd h3{height:23px;line-height:23px;padding-top:8px;font-size:14px;} .leiDL dd h3 a{color:#f60;} .oneUL li.lin{height:24px;line-height:24px;padding-left:5px; background-color:red;position:relative;left:0;top:0;} .oneUL li.lin span{margin-left:4px;color:#808080;} .twoMuser{width:354px;position:absolute;left:-6px;top:0;z-index:1000;color:#fff;background-color:#000;} .twoMuser a{color:#fff;} .twoMuser strong{width:143px;height:25px;padding-left:10px;display:block;font-weight:normal;position:absolute;} .twoMuser ul{width:203px;height:auto;overflow:hidden;margin-left:151px;position:relative;right:-1px;} .twoMuser ul li{width:80px;height:24px;line-height:24px;padding-left:20px;display:block;position:relative;float:left;overflow:hidden;background:url(../images/jtou.gif) no-repeat 10px 8px;} .ms_bottom_bg{width:203px;height:4px;background:url(../images/MuserSubT.gif) no-repeat -218px -13px;position:relative;left:152px;bottom:0;overflow:hidden;} </style> </head> <body> <div class="goods_sider_l"> <h2 class="sider_l_tit">汽车用品分类</h2> <dl class="leiDL"> <dd><h3><a href="#">专车专用产品</a></h3> <ul class="oneUL"><li class="lin"><a href="#">专车专用</a></li> </ul> </dd> <dd><h3><a href="#">车内用品</a></h3> <ul class="oneUL"> <li class="lin"><a href="#">座套坐垫</a><span>— 订制座套</span></li> <li class="lin" onmouseover="showList('lis_01')" onmouseout="hiddenList('lis_01')"><a href="#">脚垫尾箱垫</a><span>— 绒面后尾箱</span> <div class="twoMuser" id="lis_01"><strong><a href="#">脚垫尾箱垫</a></strong> <ul> <li><a href="#">便携式导航</a></li><li><a href="#">空气净化器</a></li> <li><a href="#">车载dvd</a></li><li><a href="#">倒车摄像头</a></li> <li><a href="#">便携式导航</a></li><li><a href="#">车载电脑</a></li> <li><a href="#">便携式导航</a></li><li><a href="#">车载电脑</a></li> <li><a href="#">逆变电源</a></li><li><a href="#">充气泵</a></li> <li><a href="#">gps测速雷达</a></li><li><a href="#">车载冰箱</a></li> <li><a href="#">逆变电源</a></li><li><a href="#">充气泵</a></li> <li><a href="#">gps测速雷达</a></li><li><a href="#">车载冰箱</a></li> </ul> <div class="ms_bottom_bg"></div> </div> </li> <li class="lin"><a href="#">内饰套装</a><span>— 卡通系列</span></li> <li class="lin"><a href="#">汽车精品</a><span>— 方向盘套</span></li> </ul> </dd> <dd><h3><a href="#">车外用品</a></h3> <ul class="oneUL"> <li class="lin"><a href="#">车外装饰</a><span>— 牌照架</span></li> <li class="lin"><a href="#">车外功能用品</a><span>— 挡泥板</span></li> <li class="lin"><a href="#">车贴</a><span>— 数字字符贴</span></li> </ul> </dd> </dl> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: lba8610 发布时间: 2010-09-13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ list-style:none;margin:0;padding:0;} body{font:12px/180% 宋体,serif;background-color:#fff;} .goods_sider_l{width:185px;float:left;} .sider_l_tit{height:31px;line-height:33px;padding-left:10px;color:#fff;font-size:14px;background:url(../images/big_bg.jpg) no-repeat left -42px;overflow:hidden;} .leiDL{border:1px solid #E58A31;border-top:none;padding-top:10px;padding-bottom:10px;clear:left;} .leiDL dd{margin:0 6px;padding-bottom:4px;background:url(../../images/online.gif) repeat-x left bottom;} .leiDL dd.ddnone{ background:none;} .leiDL dd h3{height:23px;line-height:23px;padding-top:8px;font-size:14px;} .leiDL dd h3 a{color:#f60;} .oneUL li.lin{height:24px;line-height:24px;padding-left:5px; background-color:red;position:relative;left:0;top:0;} .oneUL li.lin span{margin-left:4px;color:#808080;} .twoMuser{width:354px;position:absolute;left:-6px;top:0;z-index:1000;color:#fff;background-color:#000;} .twoMuser a{color:#fff;} .twoMuser strong{width:143px;height:25px;padding-left:10px;display:block;font-weight:normal;position:absolute;} .twoMuser ul{width:203px;height:auto;overflow:hidden;margin-left:151px;position:relative;right:-1px;} .twoMuser ul li{width:80px;height:24px;line-height:24px;padding-left:20px;display:block;position:relative;float:left;overflow:hidden;background:url(../images/jtou.gif) no-repeat 10px 8px;} .ms_bottom_bg{width:203px;height:4px;background:url(../images/MuserSubT.gif) no-repeat -218px -13px;position:relative;left:152px;bottom:0;overflow:hidden;} </style> </head> <body> <div class="goods_sider_l"> <h2 class="sider_l_tit">汽车用品分类</h2> <dl class="leiDL"> <dd><h3><a href="#">专车专用产品</a></h3> <ul class="oneUL"><li class="lin"><a href="#">专车专用</a></li> </ul> </dd> <dd><h3><a href="#">车内用品</a></h3> <ul class="oneUL"> <li class="lin"><a href="#">座套坐垫</a><span>— 订制座套</span></li> <li class="lin" style="z-index:11" onmouseover="showList('lis_01')" onmouseout="hiddenList('lis_01')"><a href="#">脚垫尾箱垫</a><span>— 绒面后尾箱</span> <div class="twoMuser" id="lis_01"><strong><a href="#">脚垫尾箱垫</a></strong> <ul> <li><a href="#">便携式导航</a></li><li><a href="#">空气净化器</a></li> <li><a href="#">车载dvd</a></li><li><a href="#">倒车摄像头</a></li> <li><a href="#">便携式导航</a></li><li><a href="#">车载电脑</a></li> <li><a href="#">便携式导航</a></li><li><a href="#">车载电脑</a></li> <li><a href="#">逆变电源</a></li><li><a href="#">充气泵</a></li> <li><a href="#">gps测速雷达</a></li><li><a href="#">车载冰箱</a></li> <li><a href="#">逆变电源</a></li><li><a href="#">充气泵</a></li> <li><a href="#">gps测速雷达</a></li><li><a href="#">车载冰箱</a></li> </ul> <div class="ms_bottom_bg"></div> </div> </li> <li class="lin"><a href="#">内饰套装</a><span>— 卡通系列</span></li> <li class="lin"><a href="#">汽车精品</a><span>— 方向盘套</span></li> </ul> </dd> <dd><h3><a href="#">车外用品</a></h3> <ul class="oneUL"> <li class="lin"><a href="#">车外装饰</a><span>— 牌照架</span></li> <li class="lin"><a href="#">车外功能用品</a><span>— 挡泥板</span></li> <li class="lin"><a href="#">车贴</a><span>— 数字字符贴</span></li> </ul> </dd> </dl> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: radom 发布时间: 2010-09-13

楼上能否说下是什么情况修改哪些地方了没能看出来