Solution to Z-index failure bug under IE6

First I do this, all a label z-index is 10, after the pop-up layer Z-index 20, the current a label Z-index 30, so in Chrome, Firefox, Ie98 have achieved the desired effect (set the Z-index process of course to set up the position this thing, if you have to read the online article will know. ）

IE67 is not compatible after the first time, which is the demo you see now (you can put it in ie67), and the pop-up layer is obscured by the other a tags. According to the usual practice according to intuition z-index:9999;position:relative;zoom:1 all kinds of attributes are used, this layer is still lying under the other a tag.
No way, it seems that the collision can not solve the problem, can only use reason to peel open ie6 under the z-index of the cause of the sinking. As far as I know (do not know when to remember) IE6 under the Z-index comparison is to see their eldest brother (parent) of the competition, that is, whose eldest brother senior (Z-index), often they also follow the superior.

Think about this demo's problem under ie67 by the logic just described, at present all a label is the same (z-index:10;), that is to say, all the old is 10 class, their younger brother certainly will not be bigger than them, so want to think of no wonder through the pop-up layer under other A, in view of this situation , I can only put the current a tag boss Li again a level, so that the mouse through the current a label and the pop-up layer as a whole to improve a grade, so that it will not give other a tag cover.

In CSS, obviously, only through the code to change the level, this property is Z-index, to let Z-index function has a small premise, is the element position attribute if Relative,absolute or fixed. Just like having a child, a person is not good, need to cooperate. The amateur sketch map for Z-index:

According to normal thinking, the higher the z-index level, the more the content should be shown above. In most browsers in most cases, this is true, but not absolute. Especially encountered IE6, this guy, is estimated to be a stepmother with large, poor nutrition, the result was a pile of health problems. Z-index's problem is one of them, and this article is to talk about this IE6 under the Z-index does not work.

Ii. Some necessary instructions on the screenshot of the effect

The following is not nonsense, is to make it easier to understand the content of my spit.

The big background for all of the following screenshots is as follows:
1, fixed on the page, unchanged, send a mansion will not go off is a black background, transparency 40%, almost full screen display level of 1 absolute positioning layer. HTML is: <div id= "blank" ></div>, corresponding to CSS: #blank {width:100%; height:600px; background:black; opacity:0.4; Filter:alpha (OPACITY=40); Position:absolute; left:0; top:0; Z-index:1;}

The role is to make the hierarchy of relations at a glance. See:

This indicates that the content is below the absolute positioning layer of the Z-index 1.

This indicates that the content is above the absolute positioning layer of the Z-index 1.

2, on the page to do contrast is a beautiful picture, the picture in the translucent black absolute positioning layer above or below it is easy to distinguish, so that you can say to me that the z-index do not have a very intuitive understanding of the role.

Third, IE6 's complaint: floating Let me sink

Now it's time to really talk about the problem, why, and how to solve it. First of all, the first Z-index no matter how high the setting does not work. This situation occurs when there are three conditions: 1, the parent Tag position property is relative;2, the problem label has no position attributes (excluding static), 3, and the problem label contains floating (float) properties.
You can take the following code to do a simple test yourself:

The code is as follows	Copy Code
<div id= "blank" ></div><div style= "position:relative"; z-index:9999; " > </div>

Ya, this z-index is 9999 , the level is high enough, but, look at the following figure:

This contrast to know the problem, may be questioned, this will not be IE6 relative own cold, rather than floating (float) carrying a "swine flu virus." OK, I'll remove the float now, the HTML code is as follows:

The code is as follows	Copy Code
<div id= "blank" ></div><div style= "position:relative"; z-index:9999; " > </div>

Results under IE6:

I think, the problem should be clear, as for the reason, I thought it was haslayout, later, with zoom a test, found that is not (IE7 without this bug also proved not haslayout reason), it seems that this float will let z-index failure. Because the external Div position:relative property to Absolute can solve this problem, I suspect is not floating let relative occurred some changes, float and relative in horizontal positioning can be said to be close relatives, will not Because the two mix together, so what "deformed" "sickly" appeared. This is only my guess, and the real reason is to ask IE6 's stepmother.

Solution , the solution is three, 1, position:relative changed to position:absolute;2, remove floating; 3, floating element add position attribute (such as Relative,absolute).

Four, stubborn IE6: it only recognized the first father
Perhaps many people know, this IE6, the level of the level of not only to see themselves, but also to see their father this backstage is hard enough. The term is described in detail as:
When the parent tag position property is relative or absolute, the absolute property of the child label is relative to the parent tag. In the IE6, the level of performance is sometimes not to look at the z-index of the child tags, but to see their parent tag z-index who is high who low.

A person with a certain experience may know the facts above. However, believe that many people do not know that IE6, the decision level is not the current parent tag, but the entire DOM tree (node trees) of the first relative properties of the parent tag. Sometimes we deal with a parent tag more often, z-index level and complex situation is rare, so it is inevitable that there will be a small deviation of understanding.

OK, let's show you the bug here.

The condition is very simple, as long as the first element of the absolute positioning of the first father, or the oldest of that father-level person's relative attribute is less than the z-index level of the black semitransparent layer. For example, the following HTML code:

The code is as follows	Copy Code
<div id= "blank" ></div><div style= "position:relative;" > <div style= "position:relative; z-index:1000; " > <div style= "Position:absolute; z-index:9999; " > </div> </div></div>

You can see that the mm3 picture of the parent tag div is absolute positioning, level 9999, more than 1, the absolute positioning of the parent tag level 1000 (10000), but also more than the black translucent layer of z-index:1, but, our poor IE6 children's shoes-

Take another look at the other children's shoes that are represented by Firefox:

IE7 and IE6 have the same bug, the reason is very simple, although the image of the div is the current father level is very high (1000), but because Dad's dad is not good, poor 9999 such a strong child does not have the light!

It's easy to know why. The HTML code after adding Z-index to the first father is as follows:

The code is as follows	Copy Code
<div id= "blank" ></div><div style= "position:relative"; z-index:1; " > <div style= "position:relative; z-index:1000; " > <div style= "Position:absolute; z-index:9999; " > </div> </div></div>

Results IE6 Children's shoes, bright spring:

You can ruthlessly click here: Change the parent tag level online demo test

V. Necessary conclusion
to be honest, my energy for Z-index research is relatively limited, and the two bug studies in this article are all part of the surface. Z-index This is unfathomable, the knowledge contained in the CSS manual is not the thing, it is only the tip of the iceberg. This involves the border and background stacked models, involving the same level of display problems, as well as browser display mechanisms, etc., this is a deep pool of water.