overflow:hidden也能影响层的堆叠顺序。

昨天在弄一个弹出层得时候，发现弹出层不能显示在最上面。开始以为是没设置z-index的关系。后来才发现。。。

<!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="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style>  </style> </head> <body> <div id="adminHead"> <ul id="nav"> <li><a href="#">资料管理</a> <ul> <li><a href="#">基本资料</a></li> <li><a href="#">等级管理</a></li> <li><a href="#">密码修改</a></li> <li><a href="#">站内短信</a></li> </ul> </li> <li><a href="#">询价管理</a> <ul> <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> </ul> </li> </ul> <script type=text/javascript><![CDATA[//><!]]></script> </div> <div id="mainAdmin" style="height:80px; border:10px solid #009999;; width:930px; margin:0 auto; overflow:hidden;"> <h3>配置管理</h3> </div> </body> </html>
提示：您可以先修改部分代码再运行

在FF下把<div id="mainAdmin" style="height:80px; border:10px solid #009999;; width:930px; margin:0 auto; overflow:hidden;">红色部分除掉就能让弹出层显示在最上边，否则会被mainadmin的边框挡住

测试浏览器:FF2.0

[ 本帖最后由 ship763 于 2008-11-14 10:14 编辑 ]

作者: ship763 发布时间: 2008-11-14

FF3.0.3测试没有问题。
你使用的是哪个版本的firefox

作者: Missx 发布时间: 2008-11-14

IE7也没问题

这菜单只会出来,不会回去

[ 本帖最后由 kooyle 于 2008-11-14 10:11 编辑 ]

作者: kooyle 发布时间: 2008-11-14

Firefox/2.0.0.18

作者: ship763 发布时间: 2008-11-14

嗯嗯，，，弹出层出来了，，收不回去，

作者: dandiao0919 发布时间: 2008-11-14

IE8 beta2正常！没有改你的代码！

作者: xiaotian_s 发布时间: 2008-11-14

是的，曾经遇到同样情况。

作者: zidanezhicong 发布时间: 2008-11-14

overflow应该真的可以改变z值

看下这个，由于margin负值产生的z值混乱，使用overflow解决（注意overflow是放在子元素内的，并且属性值不限hidden;）。

请对照ie6,ie7,ff看效果（其实这里是针对ie的。不像LZ的是针对ff2的）

<!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="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{padding:50px;} </style> </head> <body> <div style="width:100px; height:100px; border:1px solid #999; "> <div style="margin:0 -20px;background:#ccc; ">无overflow</div> </div> <br /> <div style="width:100px; height:100px; border:1px solid #999; "> <div style="margin:0 -20px;overflow:hidden;background:#ccc; ">有overflow</div> </div> <br /> <div style="width:100px; height:100px; border:1px solid #999; "> <div style="margin:0 -20px;background:#ccc; position:relative;zoom:1;z-index:1000; ">其实这里也可以用z-index来统一（且兼容ie6）</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 ONEBOYS 于 2008-11-14 12:59 编辑 ]

作者: ONEBOYS 发布时间: 2008-11-14

提醒:最后回贴距现在 682 天，请不要无意义回复

作者: genhua 发布时间: 2010-09-27