A Preliminary Study on the bug that Z-index does not play a role in epilepsy in IE6

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 471

I. Concept of Rush
The definition of the mid-level Z-index in CSS is not the focus of this article. It will not take too much space to detail. This is simple because Z-index is produced along with the concept of layer. 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 closer the layer is), the more it is displayed on the top. 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, it is clear that onlyCodeChange the level. This attribute is Z-index. To make Z-index take effect, there is a small premise that the position attribute of the element must be relative, absolute, or fixed. Just like giving birth to a child, a person does not need to be used and needs to cooperate. Amateur Z-index:

According to the normal thinking, the higher the Z-index level, the more content should be displayed on it. In most cases, this is true for most browsers, but it is not absolute. This guy, especially IE6, is estimated to have a lot of post-mothers who suffer from malnutrition since childhood. As a result, there were a bunch of health problems. The Z-index problem is one of them, and this article is to talk about the issue that Z-index under IE6 does not work.

Ii. Description of the effect
The following is not nonsense. It is to make it easier for me to understand the content below.

The background of all the following results is as follows:
1. The page is fixed and static, and the luxury home will not be delivered from a good black background, with a transparency of 40%. The level displayed on almost full screen is the absolute positioning layer of 1. HTML:<Div id = "blank"> </div>, Corresponding 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 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
Now, I am going to talk about the cause and solution of the problem. 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 parent tag position attribute is relative; 2. the problem tag does not have the position attribute (excluding static); 3. The problem tag contains float) attribute.
You can perform a simple test with the following code:

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

</Div>
 

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

This is a problem. Some people may wonder if this is because IE6 relative caught a cold rather than float carrying the "A-stream virus ". Okay, I will remove floating now. the HTML code is as follows:

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

</Div>
 

Result IE6:

You can click here: Online Demo Testing

I think the problem should be clear. As for the reason, I thought it was a ghost of haslayout. Later, I used zoom to test it, no (this bug does not prove to be the cause of haslayout in IE7). It seems that this float will invalidate Z-index. Since changing the position: relative attribute of the external Div to absolute can solve this problem, I doubt whether float makes some changes to relative. Float and relative are close relative in horizontal positioning, is it because the two are mixed together? So what is "malformed" and "physical weakness and multiple diseases. This is just my guess. The real reason is to ask IE6's stepmother.

Solution: 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
Many people may know that in IE6, the level should not only be determined by yourself, but also whether your dad's background is hard enough. 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.

People with experience may all know the above facts. 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.

Okay. The bug is shown below.

The condition is very simple, as long as the first father of the first element is definitely located, or the relative attribute of the old father level is smaller 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-indexes: 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:

Click here to change the parent tag level Online Demo Test

5. necessary conclusion
To be honest, my research on Z-index is actually limited. The two bug studies in this article are stuck on the surface. 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.

In a word, the essence of Z-index will be uncovered step by step.

OriginalArticle, Reprint please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 471

(This article is complete)