Home >Web Front-end >HTML Tutorial >Help with z-index problem in IE7_html/css_WEB-ITnose
Help with z-index problem in IE7_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:19:291264browse
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>
How to make the second li under the first winePopup
Reply to discussion (solution)
For merged objects, the larger the value of this attribute parameter is, the higher it will be stacked on top.
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6
f27d9dfce408dd01172679f6b32c6d67Class "winePopup" is shown here The content of 16b28748ea4df4d9c2150843fecfba68
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
9184ff36f5d21fa2feaf767a3819232cThe content of class "winePopup" is displayed here16b28748ea4df4d9c2150843fecfba68
It is unreasonable to ask subclasses to cross the parent level.
Therefore, position:relative can only be dynamically added to li through js. Only when position:relative is added, z-index will take effect. If there is no effect, remove position:relative; the general idea is this. To use this special effect, you can use jq to dynamically operate like this. If you want to hide and display the menu, you can do this:
Thank you The master on the third floor gives advice
<!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>