Questions about positioning and z-index cascading_html/css_WEB-ITnose

After using positioning, z-index is a bit weird and does not work. .

First upload the code 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>

Currently you need to 53823dbe05f4a1f619d0594395d29875WeChat16b28748ea4df4d9c2150843fecfba68Place in previous Layer;ff6d136ddc5fdfeffaf53ff6ee95f185b15579e0f437c585492f30a832f0b1a8bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689Place it on the next layer
Single and multiple tests have no effect ff6d136ddc5fdfeffaf53ff6ee95f185e48241b4ae45ade54b5a778063e34ba5bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689Always occupy the top level.


Please advise!

Reply to discussion (solution)

I tested with your code here, they don’t overlap at all, why are they layered? You want to make tabs, right? ? 

Same. I need the div to cover the position of one pixel below LI pt_box, so it still needs to be layered in order.

But no matter how I set it, pt_box is on top of the corresponding diiv, and there is no effect.

Same. I need the div to cover the position of one pixel below LI pt_box, so it still needs to be layered in order.

But no matter how I set it, pt_box is on top of the corresponding diiv, and there is no effect.

Is it a problem with the ul tag?
How about we do this?

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

It has nothing to do with UL.

Simplify the code to make it easier to read

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

The cascading problem has been solved. Just take out the displayed div into a new div


But there is a big difference between positioning IE and FF. How to solve it?