IE7_html/css_WEB-ITnose の z-index の問題に関するヘルプ-htmlチュートリアル-php.cn

IE7_html/css_WEB-ITnose の z-index の問題に関するヘルプ

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>

ログイン後にコピー

最初の winePopup の下に 2 番目の li を作成する方法

ディスカッションへの返信 (解決策)

並列オブジェクトの場合、この属性パラメータの値が大きいほど、上にスタックされます。

クラス "winePopup" の内容がここに表示されます
/li>
ここにクラス "winePopup" が表示されます

<!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>

ログイン後にコピー

3階のマスターさん、アドバイスありがとうございます