The reason analysis and solving method of ZIndex attribute invalidation in div layer adjustment

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:

1	<</code>DIV style="POSITION: relative; Z-INDEX: 9999">

2	<</code>IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0.jpg">

3	</</code>DIV>

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 image of the current level of the father of the div 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:

1	<</code>DIV style="POSITION: relative">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>

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

1	<</code>DIV style="POSITION: relative; Z-INDEX: 1">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>

The reason analysis and solving method of ZIndex attribute invalidation in div layer adjustment