How to troubleshoot div layer Adjustment Z-index Property Invalid method

This article mainly introduced the P layer adjustment z-index attribute Invalid reason analysis and the solution method, needs the friend can refer to the next

Z-index invalid

In the process of doing, found a very simple but many people should encounter the problem, set the Z-index property is invalid. In CSS, only through the code to change the hierarchy, this property is Z-index, to let Z-index function has a small premise, that is, the element position attribute if Relative,absolute or fixed.

1. The first case (Z-index regardless of how high the setting is):

There are three conditions in which this happens:

1, the parent tag position attribute is relative;
2, problem label no position attribute (not including static);
3. The problem label contains the float (float) attribute.

The Eg:z-index hierarchy does not work, the float will invalidate the Z-index, the code is as follows:

<p style= "position:relative; z-index:9999 ">    </p>

There are three solutions (any one can):

1, position:relative changed to Position:absolute;
2, floating elements add position attributes (such as relative,absolute, etc.);
3, remove the float.

2. The second case

IE6, the level of performance is sometimes not to look at the z-index of the sub-tag, but to look at the hierarchy of the parent tag of the first relative property of the entire DOM tree.

Eg:ie7 and IE6 have the same bug, the reason is very simple, although the picture of P current father level is very high (1000), but because Dad's father is not useful, poor 9999 such a strong child no doomed Ah! , the code is as follows:

<p style= "position:relative" ><p style= "position:relative; z-index:1000 "><p style=" Position:absolute; z-index:9999 ">  </p></p> </p>

Workaround: In the first relative attribute plus a higher level (Z-INDEX:1), the code is as follows:

<p style= "position:relative; Z-index:1 ">  <p style=" position:relative; z-index:1000 ">  <p style=" Position:absolute; z-index:9999 ">  </p>  </p>  </p>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

About CSS3 rem (setting font size) parsing