当前位置：首页 → 问答吧 → ie下的z-index有没有方法子级盖过下一层的父级

ie下的z-index有没有方法子级盖过下一层的父级

时间：2011-01-18

来源：互联网

蓝色上有篇讨论的z-index的文章http://bbs.blueidea.com/thread-2909953-1-1.html看完后还是没找到合适ie的解决方法
大致的代码如下：

<!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> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} body{font-size:12px;} ul {list-style:none;} ul#container{margin:100px auto;width:660px;font-size:12px;} ul#container li{background:#f5f5f5;border:1px solid #000;height:150px;position:relative;} ul#container .son{background:#fff;border:1px solid #33f;width:150px;height:200px;position:absolute;top:5px;right:15px;z-index:10;} </style> </HEAD> <BODY> <ul id="container"> <li><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> <li><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> <li><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> </ul> </BODY> </HTML>
提示：您可以先修改部分代码再运行

有没有别的方法可以让自己越过下一层的父级呢,多谢多谢

作者: oreoo 发布时间: 2011-01-18

没别的办法

<!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> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} body{font-size:12px;} ul {list-style:none;} ul#container{margin:100px auto;width:660px;font-size:12px;} ul#container li{background:#f5f5f5;border:1px solid #000;height:150px;position:relative;} ul#container .son{background:#fff;border:1px solid #33f;width:150px;height:200px;position:absolute;top:5px;right:15px;z-index:10;} </style> </HEAD> <BODY> <ul id="container"> <li style='z-index:3'><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> <li style='z-index:2'><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> <li style='z-index:1'><p>父级</p><div class="son">子级越过下一个父级的问题</div></li> </ul> </BODY> </HTML>
提示：您可以先修改部分代码再运行

对于定位元素。跨级比较归根结底是要比较同级两元素的z值的，即这里的三个li

作者: ONEBOYS 发布时间: 2011-01-18

明白了。有幸oneboys亲自来讲解了。真恨死ie了