ul li {width: 130px;float: left;height: 115px;position: relative;background-color: #000;/*z-index: 1;*/}ul li .winePopup {background-color: #910312;width: 235px;position: absolute;z-index: 9999;left: 100px;height: 100px;color: #FFF;}<ul><li> <div class="winePopup">此处显示 class "winePopup" 的内容</div></li><li> <div class="winePopup">此处显示 class "winePopup" 的内容</div></li></ul>
并级的对象，此属性参数值越大，则被层叠在最上面。
这个站在css的角度是无解的，因为li都是同级的，而且是winepopup的爷级类元素，想要子类去跨越父级的层级，这是不合理的。
所以只能通过js来动态的去给li添加position:relative，只有添加了position:relative时z-index才会生效。如果没有效果就去除position:relative;大概思路就是这样，利用这个特效可以用jq动态的这样操作，如果要实现菜单的隐藏显示的话，可以这样：
<!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" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css"> ul li {width: 130px; float: left; height: 115px; background-color: #000; margin-right:20px; /*z-index: 1;*/ } ul li .winePopup {background-color: #910312; display:none; width: 235px; position: absolute; z-index: 9999; left: 100px; height: 100px; color: #FFF;} </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script></head><body><ul id="nav"> <li> <div class="winePopup">111111</div> </li> <li> <div class="winePopup">2222</div> </li></ul><script type="text/javascript"> $('#nav li').hover(function(){ $(this).css({position: 'relative'}); $('.winePopup', this).show(); }, function(){ $('.winePopup').hide(); $(this).css({position: ''}); });</script></body></html>多谢三楼大神指教
