求助z-index在IE7中问题_html/css_WEB-ITnose-HTML-Tutorial-php.cn

求助z-index在IE7中问题_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 12:19:29

Original

1261 Leute haben es durchsucht

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;}

Nach dem Login kopieren

<ul><li>  <div class="winePopup">此处显示  class "winePopup" 的内容</div></li><li>  <div class="winePopup">此处显示  class "winePopup" 的内容</div></li></ul>

Nach dem Login kopieren

怎样才能让第二个li在第一个winePopup下面

回复讨论(解决方案)

并级的对象，此属性参数值越大，则被层叠在最上面。

此处显示 class "winePopup" 的内容

此处显示 class "winePopup" 的内容

这个站在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>

Nach dem Login kopieren

多谢三楼大神指教