Shulou(Shulou.com)06/03 Report--

This article mainly introduces the ie6 z-index does not work how to do, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

I. concept

Z-index comes into being with the concept of layers. In a web page, the concept of layer is the same as that of photoshop or flash. Those who are familiar with photoshop or flash should know that the higher the level (the higher the layer), the more it is displayed on it. If the layers overlap, the higher levels will cover the lower levels, and if they are non-transparent or translucent, they will be obscured.

In photoshop

The level of layers is manually adjusted, dragged by the mouse, or ctrl+] or ctrl+shift+ [shortcut keys to change the order of the layers. As shown in the following figure, in the process of dragging the mouse to change the order of layers:

In flash

Similarly, you can change the graph hierarchy manually, or use an as script, for example: container object .setChildIndex (display object, 0) is to make the object display at the bottom, and container object .setChildIndex (display object, container object .numChildren-1) is the top display.

In CSS

The Z-index attribute determines the cascading level of an HTML element. The element cascading level is relative to the position of the element on the Z axis (compared to the X axis and Y axis). A higher Z-index value means that the element is closer to the top in the stacking order. This cascading order is presented along the vertical spool. Obviously, the level can only be changed through code, and this attribute is z-index, and there is a small premise for z-index to work, that is, the position attribute of the element is relative,absolute or fixed. The following is a schematic diagram of z-index:

According to normal thinking, the higher the level of z-index, the more content should be displayed on it. In most browsers, in most cases, this is true, but not absolutely. Especially when I met IE6, this guy, probably brought up by his stepmother, was malnourished from an early age, and ended up with one health problem after another. The problem of z-index is one of them, and this article is to talk about the problem that z-index does not work under IE6.

2. Some necessary instructions on the screenshot of the effect

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

The HTML is:

The corresponding CSS is: # blank {width:100%; height:600px; background:black; opacity:0.4; filter:alpha (opacity=40); position:absolute; left:0; top:0; zmuri index 1;}

The function is to make the hierarchical relationship clear at a glance. Look:

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

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

2. What is compared on the page is the beauty picture, and it is easy to tell whether the picture is above or below the translucent black absolute positioning layer, so that you can have a very intuitive understanding of what I said z-index does not work.

Third, IE6's complaint: floating makes me sink.

First of all, let's talk about the situation where the first z-index doesn't work no matter how high the setting is.

There are three conditions for this to happen:

1. The parent tag position attribute is relative

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

3. The question tag contains a float attribute.

You can do a simple test yourself with the following code:

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

Now remove the float, and the HTML code is as follows:

Results under IE6:

Changing the position:relative property of the external div to absolute can solve this problem.

There are three solutions: 1, change position:relative to position:absolute;2, remove floats; 3, add position attributes to floating elements (such as relative,absolute, etc.).

4. Stubborn IE6: it only recognizes the first father

It is specifically described in terms as:

When the parent tag position attribute is relative or absolute, the absolute attribute of the child tag is relative to the parent tag. Under IE6, the performance of the hierarchy sometimes depends not on how high the z-index of the child tag is, but on who has the high and low z-index of their parent tag.

However, I believe that many people do not know that under IE6, it is not the current parent tag that determines the level, but the parent tag of the first relative attribute of the entire DOM tree (node tree). Sometimes we usually deal with a parent tag, z-index levels and complex situations are rare, so it is inevitable that there will be a small deviation in understanding.

For example, the following HTML code:

As you can see, the parent tag div of mm3 images is absolute positioning, level 9999, much larger than 1, and absolute positioning parent tag level 1000 (also the same as 10000), which is also more than black translucent z-index:1, but our poor IE6 children's shoes--

IE7 and IE6 have the same bug, the reason is very simple, although the picture of div's current father level is very high (1000), but because the father's father is not useful, poor 9999 of such a strong child did not have the first day ah!

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

As a result, IE6 children's shoes were smiling and the spring was brilliant:

Thank you for reading this article carefully. I hope the article "what if z-index doesn't work in ie6" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.