位置決めと Z-インデックスに関する質問 cascading_html/css_WEB-ITnose

位置決めを使用した後、z-index が少しおかしくなり、機能しません。 。

まず、 コードに移動します CSS:

.head_right_pt{ width:68px; height:39px;  float:left; cursor:pointer; line-height:38px;font-size:14px;border-right:1px solid #fcfcfc; border-left:1px solid #fcfcfc;position:relative }.pt_hover{  border-right:1px solid #4589de; border-left:1px solid #4589de; background:#ffffff; z-index:2; }.pt_out{ }.head_right_pt ul{ margin:0; padding:0; list-style:none; }.pt_box{	width:300px;	height:120px;	overflow:hidden;	background:#fff;	border:1px solid #4589de;	filter:alpha(opacity=90);  /*支持 IE 浏览器*/	-moz-opacity:0.90; /*支持 FireFox 浏览器*/	opacity:0.90;  /*支持 Chrome, Opera, Safari 等浏览器*/  z-index:3;	position:absolute;	right:-1px;	bottom:-121px;}

HTML code:

<div id="head_right"><div class="head_right_pt" ><div style="background:url(myimages/pingtai.gif) no-repeat;width:68px; height:39px ;text-indent:2.3em">APP</div><ul><li class="pt_box"></li></ul></div><div class="head_right_pt" ><div style="background:url(myimages/pingtai.gif) no-repeat 0px -38px;width:68px; height:39px ;text-indent:2.3em">手机</div><ul><li class="pt_box"></li></ul></div><div class="head_right_pt" ><div style="background:url(myimages/pingtai.gif) no-repeat 0px -76px;width:68px; height:39px ;text-indent:2.3em">微信</div><ul><li class="pt_box"></li></ul></div></div>

現在、

WeChat

1 つ上のレイヤーに配置;

次のレベルに配置します
単一および複数のテストは効果がありません
常に最上位を占めます。


アドバイスください！



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

ここでコードをテストしましたが、まったく重なりません。なぜ階層化されているのですか?タブを作りたいですよね？ ?

同じです。 LI pt_box の 1 ピクセル下の位置をカバーする div が必要なので、やはり順番に階層化する必要があります。

しかし、どのように設定しても、pt_box は対応する diiv の上にあり、効果はありません。

同じです。 LI pt_box の 1 ピクセル下の位置をカバーする div が必要なので、やはり順番に階層化する必要があります。

しかし、どのように設定しても、pt_box は対応する diiv の上にあり、効果はありません。


ULタグに問題があるのでしょうか？
こうしてみませんか？


<ul class="pt_box"><li></li></ul>

はULとは何の関係もありません。

読みやすくするためにコードを簡略化します



.head_right_pt{ width:68px; height:39px;  float:left; cursor:pointer; line-height:38px;font-size:14px;border-right:1px solid #fcfcfc; border-left:1px solid #fcfcfc;position:relative }.pt_hover{  border-right:1px solid #4589de; border-left:1px solid #4589de; background:#ffffff; z-index:2; }.pt_out{ }.head_right_pt ul{ margin:0; padding:0; list-style:none; }.pt_box{	width:300px;	height:120px;	overflow:hidden;	background:#fff;	border:1px solid #4589de;	filter:alpha(opacity=90);  /*支持 IE 浏览器*/	-moz-opacity:0.90; /*支持 FireFox 浏览器*/	opacity:0.90;  /*支持 Chrome, Opera, Safari 等浏览器*/  z-index:3;	position:absolute;	right:-1px;	bottom:-51px;}





<div class="head_right_pt" ><div style="background:url(myimages/pingtai.gif) no-repeat 0px -76px;width:68px; height:39px ;text-indent:2.3em">微信</div><ul><li class="pt_box"></li></ul></div></div>

カスケード問題は解決されました。表示されているdivを新しいdivに取り出すだけです


しかし、IEとFFの配置には大きな違いがあります、それを解決するにはどうすればよいですか