Heim >Web-Frontend >HTML-Tutorial >求助z-index在IE7中问题_html/css_WEB-ITnose
求助z-index在IE7中问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:19:291258Durchsuche
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> 多谢三楼大神指教
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ie7下拉菜单兼容问题_html/css_WEB-ITnoseNächster Artikel：GET传值的问题_html/css_WEB-ITnose