Solutions to Z-index Bugs under IE6 and IE7

First, the concept of a hasty
About the definition of hierarchical z-index in CSS ah what is not the focus of this article, will not spend too much space in detail. Here is the simple, z-index with the concept of thelayer produced. In Web pages, the concept of layers is consistent with the concept of Photoshop or Flash middle. Familiar with Photoshop or flash should know that the higher the hierarchy (the more layers on the top), the more on the above, if the layer overlap, the level of high will cover the low level, if not transparent or translucent, it will be obscured.

In Photoshop, layers are either manually tuned, dragged by the mouse, or CTRL +] or ctrl+shift+[to change the order of the layers. For example, drag the mouse over the process of changing the hierarchy:

In Flash, similar, you can manually change the diagram hierarchy, or use an as script, for example, a container object. Setchildindex (Display object, 0) is the object to be displayed at the bottom, and the container object. Setchildindex (Display object, The container object. numChildren-1) is the topmost display.

In CSS, obviously, 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 position attribute of the element if Relative,absolute or fixed. Just like having a child, a person does not work, need to cooperate. The following is Z-index's amateur:

According to normal thinking, the higher the z-index level, the more the content should be shown above. In most of the browsers in most cases, it is true, but not absolutely. Especially encountered IE6, this guy, is estimated to be a stepmother with large, small malnutrition, resulting in a heap of health problems later. Z-index's problem is one of them, and this article is to talk about this IE6 under Z-index do not work problem.

Ii. some necessary notes on the effects
The following is not nonsense, is to make it easier to understand the content of my saliva below the fly.

< Span style= "BORDER-COLLAPSE:COLLAPSE; Color: #424242; Font-family:arial, Sans-serif; font-size:16px; line-height:25px; " The background of all the following results is as follows:
1, fixed on the page, static, send the mansion will not Magdalene is a black background, transparency 40%, almost full screen display of the level of 1 absolute positioning layer. HTML: <div id= " Blank "></DIV> , corresponding to the 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 relationship at a glance. See:

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

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

2, on the page to do contrast is beautiful picture, the picture in the translucent black absolute positioning layer above or below is very easy to identify, so that you can be said to me Z-index does not work has a very intuitive understanding.

Three, IE6 complain: float let me sink
Now it's time to really tell the story, the reason and the solution. First, the first type of Z-index no matter how high the setting is. There are three conditions for this situation: 1, the parent Tag position property is relative;2, the problem label has no position attribute (not including static), and 3, the problem label contains a floating (float) attribute.
You can do a simple test yourself by taking the following code:

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

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

Results IE6:

You can really click here: Online demo test

I think the problem should be clear, as for the reason, I thought it was haslayout, and later, with zoom a test, found not (IE7 no this bug also proved not haslayout reason), it seems that this float will let Z-index fail. Since the position:relative attribute of the external div is changed to absolute can solve this problem, I doubt whether the float let relative change, float and relative in the horizontal position can be said to be close relatives, will not Because the two are mixed together so what "deformed" "sickly" appeared. This is only my guess, the real reason is to ask IE6 's stepmother.

Workaround, the workaround has three, 1, position:relative change to position:absolute;2, remove floating, 3, floating element add position attribute (such as relative,absolute, etc.).

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

Someone with some experience may know the facts above. However, it is believed that many people do not know the IE6, the decision level is not the current parent tag, but the entire DOM tree (node trees) the first relative property of the parent tag. Sometimes we deal with more than one parent tag, z-index levels are many and complex situation is rare, so there will inevitably be a small deviation of understanding.

OK, this bug is shown below .

The condition is simple, as long as the first father of the first element is absolutely positioned, or the oldest of that father-level person's relative attribute is less than the z-index level of the black translucent layer. For example, the following HTML 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>  

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

Then look at other children's shoes, which are represented by Firefox:

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!

It's easy to know why, but the HTML code after adding Z-index to the first dad is as follows:

Results IE6 children shoes grinning, spring bright:

V. Necessary concluding remarks
Frankly speaking, my research on the z-index of the energy is actually relatively limited, the two bug study in this article belongs to stay on the surface. Z-index this thing is unfathomable, inside the knowledge is not the CSS Manual of that point, it is just the tip of the iceberg. This involves stacking models of border and background, involving display problems at the same level, as well as the mechanisms displayed by the browser, which is a deep pool of water.

In short, slowly, slowly accumulate, slowly study, will be a step by step to uncover the z-index of the essence of the veil

Solutions to Z-index Bugs under IE6 and IE7