当前位置：首页 → 问答吧 → 用z-index如何遮挡后面的元素？

用z-index如何遮挡后面的元素？

时间：2011-04-28

来源：互联网

以下代码在IE8、Chrome、Firefox能正常，span标签能遮挡后面的元素，但是在IE6、7下遮挡不了，在不改变结构的情况下，有什么办法嘛？

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>z-index问题</title> <style> dl,dd,dt{margin:0;padding:0;} dl{overflow:hidden;width:300px;} dt{float:left;width:100px;} dd{float:left;position:relative;width:200px;} dd span{position:absolute;top:20px;left:0;border:1px solid #d00;background:#ff3;z-index:9;} </style> </head> <body> <dl> <dt>第一行</dt> <dd>相关说明</dd> <dt>第二行</dt> <dd>相关说明<span>第二行的提示</span></dd> <dt>第三行</dt> <dd>相关说明</dd> </dl> </body> </html>
提示：您可以先修改部分代码再运行

作者: jkli 发布时间: 2011-04-28

你这里SPAN是DD的子元素，且所有DD都position:relative;了，相当于所有的DD都处于同一层次，按照叠加法则，子元素的z-index无论多大，父元素大者居上。

你可以参看：
理解五条叠加法则，自由使用层的叠加
http://bbs.blueidea.com/thread-2924732-1-1.html

作者: zxbmt 发布时间: 2011-04-28

用z-index如何遮挡后面的元素？

热门阅读

热门下载