ホームページ >ウェブフロントエンド >htmlチュートリアル >IE7_html/css_WEB-ITnose の z-index の問題に関するヘルプ
IE7_html/css_WEB-ITnose の z-index の問題に関するヘルプ
- WBOYオリジナル
- 2016-06-24 12:19:291263ブラウズ
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 を作成する方法
ディスカッションへの返信 (解決策)
並列オブジェクトの場合、この属性パラメータの値が大きいほど、上にスタックされます。
18474ea697a59798cca89ccf5d90ff3d
f27d9dfce408dd01172679f6b32c6d67クラス "winePopup" の内容がここに表示されます16b28748ea4df4d9c2150843fecfba68 /li>
25edfb22a4f469ecb59f1190150159c6
9184ff36f5d21fa2feaf767a3819232c ここにクラス "winePopup" が表示されます bed06894275b65c1ab86501b08a632eb
このサイトこれは css の観点からは解決策ではありません。li はすべて同じレベルであり、winepopup の親クラス要素であるため、サブクラスが親レベルを越えることは不合理です。
したがって、js を介して li に動的に追加できるのは、position:relative が追加された場合にのみ、z-index が有効になります。効果がない場合は、position:relative を削除します。この特別な効果を使用するには、次のように動的に操作できます。
<!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階のマスターさん、アドバイスありがとうございます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。