首页 > web前端 > html教程 > 求助z-index在IE7中问题_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 12:19:29
原创
1265 人浏览过

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>
登录后复制


怎样才能让第二个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>
登录后复制

多谢三楼大神指教

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板