Invalid IE6 Z-Index

I. Concepts

In a webpage, the concept of layer is consistent with that of Photoshop or flash middle layer. If you are familiar with Photoshop or flash, you should know that the higher the level (the higher the layer), the more it is displayed on it. If the layer overlaps, the higher the level will cover the lower level. If it is not transparent or translucent, it will be blocked.

In Photoshop, layers are manually adjusted, dragged, CTRL +], or Ctrl + Shift + [shortcut keys to change the order of layers. For example, when you move the mouse to change the order of layers:

In flash, similarly, You can manually change the order of layers or use as scripts, such as container objects. setchildindex (Display object, 0) is to make the object display at the bottom layer, while the container object. setchildindex (Display object, container object. numChildren-1) is shown at the top.

In CSS,

The Z-index attribute determines the level of HTML elements. The element level is relative to the position of the element on the Z axis (in contrast to the Y axis of the X axis. A higher Z-index value means that the element is closer to the top in the stacked order. The stacked order is displayed along the vertical line axis.

Understanding Z-index: full perspective: css z-index attributes

This article describes the problem that Z-index does not work in IE6.

Ii. Description of the effect

The background of all the following results is as follows:

1. A fixed black background on the page with a transparency of 40% and an absolute positioning layer with a level of 1 displayed on almost full screen.

HTML:<Div id = "blank"> </div>

The corresponding CSS is:# 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 hierarchical relationships clear at a glance. See:

This indicates that the content is under the absolute positioning layer where Z-index is 1.

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

2. Beautiful pictures are compared on the page. The pictures are easily identified on the semi-transparent black absolute positioning layer, you will be able to have a very intuitive understanding of what I call z-index does not work.

Iii. Complaints from IE6: Floating makes me sink

First, let's talk about the first kind of Z-index that does not work no matter how high it is set.

There are three conditions for this situation:

1. The position attribute of the parent tag is relative;

2. The problem tag has no position attribute (excluding static );

3. Question tags contain float attributes.

You can take the followingCodePerform a simple test by yourself:

<Div id = "blank"> </div>

<Div style ="Position: relative;Z-index: 9999; ">

Style = "float: Left ;"Src = "http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg"/>

</Div>

Ya, the Z-index is all 9999, And the level is high enough. However, see the figure below:

Remove floating now. the HTML code is as follows:

 
<Div id = "blank"> </div>
<Div style = "position: relative; Z-indexes: 9999;">

</Div>
 

Result IE6:

Changing the position: relative attribute of the external Div to absolute can solve this problem.

Solution 3: 1. Change position: relative to position: absolute; 2. Remove floating; 3. Add the position attribute (such as relative and absolute) to floating elements ).

4. Stubborn IE6: It recognizes only the first father
The specific terms are described as follows:
When the position attribute of the parent tag is relative or absolute, the absolute attribute of the Child tag is relative to the parent tag. In IE6, the hierarchy is sometimes not how high the Z-index of the sub-tag is, but the Z-index of their parent tag is high or low.

However, I believe that many people do not know IE6. What determines the level is not the current parent label, but the parent label of the first relative attribute of the entire DOM tree (node tree. Sometimes we usually process one more parent tag, and there are few complex Z-index levels, so there will inevitably be a small deviation of understanding.

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 image is absolutely positioned, with a level of 9999, mostly compared to 1, and an absolute parent tag level of 1000 (same as 10000 ), it's also more than the black translucent layer's Z-index: 1, but we have poor IE6 kids shoes --

Let's look at other children's shoes represented by Firefox:

IE7 and IE6 share the same bug. The reason is very simple. Although the current dad level of the image's div is very high (1000), it is because Dad's dad is not used, sorry, there is no such day for 9999 so powerful children!

It is easy to solve the problem by knowing the cause. The HTML code after adding Z-index to the first father is as follows:

<Div id = "blank"> </div>
<Div style = "position: relative; Z-index: 1;">
<Div style = "position: relative; Z-indexes: 1000;">
<Div style = "position: absolute;Z-index: 9999; ">

</Div>
</Div>
</Div>
 

Results IE6 kids shoes were smiling and brilliant in Spring:

 

5. necessary conclusion
The Z-index is unfathomable. The knowledge in it is not the one in the CSS manual, but the tip of the iceberg. This involves the stacking model of border and background, the display problem at the same level, and the display mechanism of the browser. This is a deep pool of water.