当前位置：首页 → 问答吧 → z-index为何不起作用？

z-index为何不起作用？

时间：2010-09-30

来源：互联网

<!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" /> <title>无标题文档</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } ul { width: 200px; border: 1px solid #ccc; margin: 50px auto; padding: 5px 10px 15px; } li { height: 30px; line-height: 30px; text-indent: 8px; border: 1px solid #FFF; border-bottom-color: #E5E5E5; } li.hover { position: relative; border: 1px solid #CC0000; border-right: none; background: #FFF9ED; z-index: 10; } li a { display: block; color: #565656; font-weight: bold; } dl { position: relative; left: 199px; top: -35px; padding: 5px 0; border: 1px solid #CC0000; background: #FFF9ED; z-index: 9; } </style> </head> <body> <ul> <li class="hover"><a href="">第一分类</a> <dl> <dd><a href="">第二分类</a></dd> <dd><a href="">第二分类</a></dd> <dd><a href="">第二分类</a></dd> <dd><a href="">第二分类</a></dd> </dl> </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="">第一分类</a></li> <li><a href="">第一分类</a></li> </ul> <div id="category_b_bg"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

我想让 li.hover 层显示在dl层上，可是并不成功，求赐教~

作者: southill 发布时间: 2010-09-30

请说清楚，或者截图说明。li.hover不是dl的父容器吗？

作者: yoom 发布时间: 2010-09-30

li.hover 是dl的父容器。

难道，父容器不能在子元素上面的？

作者: southill 发布时间: 2010-09-30

明白了，解决了。谢谢版主。

我换同级别的 a 来做上面的层就可以了。

作者: southill 发布时间: 2010-09-30