Help with z-index problem in IE7_html/css_WEB-ITnose-HTML Tutorial-php.cn

Help with z-index problem in IE7_html/css_WEB-ITnose

WBOY

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

Original

1265 people have browsed it

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

Copy after login

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

Copy after login

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.

Class "winePopup" is shown here The content of

The content of class "winePopup" is displayed here

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>

Copy after login