Learn CSS Web making: Z-index in IE

css| Web page

Introduction to Z-index Properties

Reference:

Z-index:auto | Number

Auto: Default value.
Number: An integer value of no units, which can be negative.

Elements with a larger z-index value are superimposed over elements with a z-index value. For anchored objects that do not specify this attribute, the object with a positive Z-index value is above it, and the object with the Z-index value is below it.

Note : This property does not apply to window controls, such as select objects.
In ie5.5+, the IFrame object begins to support this property. In the previous browser version, the IFrame object was a window control and this property was ignored.

The Z-index property applies to anchored elements (objects that have a position property value of relative or absolute or fixed) that determine the stacking order (stack orders) of the positioned elements perpendicular to the display direction (called the z-axis).

Each positioning element belongs to a stacking context. The root element forms the root stacking context, while the other stacking context is generated by the positioning element (the z-index of this anchor element is defined as a non-auto Z-index value), and the positioned child element is represented by this local stacking Context for reference, the same rules to determine the stacking order. And there is no inevitable connection between the stacking context and the containing block.

When the stacking context is the same, the Z-index value is used to determine how the display, if Z-index is the same (that is, stack level is the same), according to the later in the file in the order of the principle (Back-to-front) cascade.

When any one element is stacked and another is contained in a different stacking context element, the sequence of the display is determined by the cascade level (stack levels) of stacking contexts. In other words, in the same stacking context will be used Z-index to decide successively, not at the same time by the stacking of the Z-index to decide. For example:

The positioning element A (Z-INDEX:100) has positioned element A1 (z-index:300), while locating element B and element a sibling (z-index:200). You will find that no matter how big the z-index of A1 is, it will be covered by Z-index B, 200, because a z-index is only 100.

Read more details:http://www.w3.org/TR/CSS21/visuren.html

First, let's look at a section of the code that demonstrates the example.

xhtml Section :

<div id= "Container" >
<div id= "Box1" > This box should be on top </div>
</div>
<div id= "Box2" > This box should be below, IE browser will create a new stacking context for the positioning element, even when the element z-index is "Auto". </div>

CSS Section :

#container {position:relative;}
#box1 {position:absolute; top:100px; left:210px; width:200px; height:200px; background-color:yellow; z-index:20;}
#box2 {position:absolute; top:50px; left:160px; width:200px; height:200px; background-color:green; z-index:10;}

The two box is fully positioned, the background color is yellow Box1 owns the Z-index property value 20, and the green Box2 has the Z-index property value 10, the only difference is that the background color is yellow box1 is placed in a defined attribute position: Relative Div, and in the document source code in front of the bit.

Based on the above code and the Z-index attribute profile, let's analyze the position of the effect that the above code will produce.

The CSS specification clearly stipulates that in addition to the root element, only the z-index of the positioning element is defined as a non-auto z-index value to produce a new stacking context. The element that is relative positioned in the example does not define Z-INDEX, that is, Z-index is the default value of auto. So it's not supposed to affect the stacking order of child elements. That is, the background color is yellow box1 and the background color is the green box2 stacking context is the same, that is the root element generated by roots stacking contexts. Then according to the rule when the stacking context, the Z-index value to determine how to display the principle, you should Z-index property value 20 background color is yellow box1 in the Z-index property value 10 background color green box2 above.

Below we in FF and IE respectively test the final effect, will find FF display effect and above analysis of the effect is exactly the same, and IE in the display is inconsistent.

Demo Address :http://www.planabc.net/demo/z-index01.html

puzzle : In IE's Z-index property value 10 The background color is green box but in the Z-index attribute value 20 background color is yellow box1 above, and our analysis result completely inconsistent, why?

FAQ : In fact, this is a bug--IE browser (Windows) in IE browser, positioning elements will produce a new stacking context, and from the Z-index value of 0 start.

Now let's understand the display logic of the above demo in IE. Set the relative positioning of the container to produce a new stacking context, so its positioned child element background color is yellow box1 the new stacking contexts as a reference to determine the stacking order. And the background color is green box2 at this time and the background color is yellow Box1 's parent element container for the same stacking context, so they decide the cascade order according to the Z-index, That is, the Z-index property value 10 background color is green box2 on the container of Z-index property value 0.

In fact, the impact of this bug is very wide, but people usually do not pay attention to. Here is a description of the most common occurrence z-index negative resolution, many friends because of the existence of the bug or even arbitrarily think IE support z-index negative, and FF does not support z-index negative.

An example might be more expressive.

xhtml Section :

<body>
<div id= "Container" >
<div id= "Box1" > Why do negative positioning elements appear inconsistent under IE and FF? Why? </div>
</div>
</body>

CSS Section :

#container {position:relative;}
#box1 {position:absolute; top:100px; left:210px; width:200px; height:200px; background-color:yellow; Z-index:-10; }

Demo Address :http://www.planabc.net/demo/z-index02.html

You will find in FF, the background color yellow box1 disappeared, and IE under the display. This is also what I said above, some friends arbitrarily think IE support z-index negative, and FF does not support z-index negative reason. We should look at nature through phenomena.

In the previous example, we know that elements that have a relative position (position:relative) but do not give a non-auto z-index do not produce a stacking context and do not affect the stacking order of their child elements. So the background color is yellow Box1 's stacking context is the root element generated by roots stacking contexts. In the previous section we talked about "for an anchored object that does not specify this attribute, the object with a positive Z-index value is above it, and the Z-index value is below", according to the rules, The yellow box1 that is set to Z-index 10 will be displayed under elements (such as body) that do not specify the Z-index attribute. So under FF the background color is yellow box1 disappeared. And in IE set the relative position of the container will have a Z-index value of 0, a new stacking context, the background color of the yellow box1 in the new stacking in order to cascade, so in IE will see the display.

But here's another question, and for the above code, let's simplify:

xhtml Section :

<body>
<div id= "Box1" > Why do negative positioning elements appear inconsistent under IE and FF? Why? </div>
</body>

CSS Section :

#box1 {position:absolute; top:100px; left:210px; width:200px; height:200px; background-color:yellow; Z-index:-10; }

Demo Address :http://www.planabc.net/demo/z-index03.html

You will find that the results are consistent with the code that is not streamlined above. However, if you use the above understanding in IE may not explain the pass. Because at this time the understanding background color is the yellow box1 the stacking context whether under the FF or under IE is the root element produces stacking context.

Puzzle : Then in IE browser, according to the rules, the background color yellow box1 should also disappear, but did not.
FAQ : IE browsers seem to give the BODY element a default relative positioning attribute (position:relative).

Through the above two simple examples, I think you should know roughly why the negative z-index in IE and FF resolution is not the same, not FF does not support, but IE bug.