CSS element cascade and z-index settings

In our article updates, we pay special attention to the guidance of new users. However, webjx.com faces a wide range of developers who may encounter various problems and some problems are very uncommon, or there are few applications, but we still need to learn more about CSS layout knowledge and technology to cope with the possible complicated and changing internal and external situations of CSS (quite sweaty ). This article mainly introduces the element cascade and z-index settings. For more information, see the webjx.com tutorial.

Statement

Positioning element: the position attribute value is set to elements other than the default value static, including relative, absolute, and fixed.
Platform: win/IE win/FF

Z-index:

Used to determine the order of positioning elements stacked perpendicular to the display (hereinafter referred to as the Z axis)


Value: auto | integer | inherit
Default Value: auto
Applicable to: positioning Elements
Inheritance: no

Understand stacking context

Each box belongs to a stacking context, which is a reference for element positioning in the Z axis. The root element forms the root stacking context. Other stacking context is generated when the z-index of the positioning element is not auto. For example, # div1 {position: relative; z-index: 0;} can generate stacking context for the element id = div1. Stacking context and containing block are not necessarily related.

Understanding stack level

Each box in a stacking context has a stack level (that is, the stack level is used below ), it determines the display order of each box on the Z axis in the same stacking context. In the same stacking context, when the stack level value is large, when the stack level value is small, the same stack level follows the back-to-front principle ). In different stacking contexts, the element display order is determined by the stack level of the parent stacking context. Independent from its own stack level. Note that stack level and z-index are not uniform. (I will understand it later)

Stack level Rules

Each stacking context can contain block elements and inline (intra-row inline) elements, what are the display sequence of elements with float attributes and positioning elements in the same parent stacking context? That is, what is the stack level? For example, if a block-level element and an inline element are stacked, who will be there? Who is behind?

Based on w3c introduction to stack level, the following stack level rules can be obtained:
Each stacking context includes the following stack levels ):


Background and boundary of parent stacking context
Position element whose z-index value is negative (smaller and smaller)
Non-locating block-level sub-elements in text streams
Non-locating float sub-elements in text streams
It seems that the inline element of stacking context can be generated.
Otherwise, the stack level of the inline element is before the block element.
Z-index: positioning element of auto/0
Position element with a positive z-index value (the larger the value, the higher the value)

The preceding stack level is executed in the browser:

The tests in firefox3.0 are completely consistent. firefox2.0 is slightly different: "The position element with Negative z-index value" is before "background and boundary of parent stacking context.
In ie6.0 and 7.0: the stack level of the inline element is located before the block element, and "non-located float floating sub-elements in the text stream" (hereinafter referred to as floating elements) it is at the same level as "block-level sub-elements that are not located in text streams" (hereinafter referred to as block elements.

Test in FF

Test page: 01.html (open in FF3.0 and FF2.0 respectively)

Code Description:

As mentioned above, if the stack level of an element is at the same level, the stack level of the element is high, regardless of the position of the Code in the document, even if the code is at the beginning; if the stack level of the element is low, the code is displayed below regardless of the Code position, even if the code is at the end.

Based on this. non-locating, block-level sub-elements "and" 4. for example, if I write the code of the non-locating float sub-element in a text stream before the block element, and the actual display is: the "float element" is on top of the "block element. The stack level of "float element" is higher than that of "block element. Because if the stack level of the same level or block element is high, the block element should be displayed on.

According to the above, the code of the High-level elements of the stack is written in front, and the code of the low-level stack is written in the back. If the result is: the code is displayed above the element, this proves the above stack level rules.

Test results:

In FF3.0, the results are consistent with the standard order. In FF2.0, the "position element with Negative z-index value" is under the background of the parent stacking context. (Note the special feature of ff2.0)

Test in IE

Test page: 2.html (see IE)

Code Description:

This code is also based on the above test ideas, but because of the special nature of the inline element in ie, The inline code is written later. Facts prove that the conclusion is correct. For the order of block elements and float elements, you can test the sequence in exchange.

Test conclusion:

In IE (whether ie6.0 or ie7.0), "float element" and "block element" belong to the same stack level, while "inline element" is lower than its stack level.

Explanation:

The "float element" and "z-index: auto positioning element" seem to have produced a new stacking context, however, it is true that any descendant of the new stacking context can be located based on its parent stacking context. (But in IE, "z-index: auto positioning element"
The value of z-index is 0, a new stacking context is generated, and its subelement location is affected. This is a BUG in IE)
Inline elements seem to generate new stacking context in FF, but not in IE.

Now that the stack level rules have been completed, we should be able to understand the differences between stack level and z-index. Stack level determines the display order of each element in the stacking context on the z axis. Only the z-index determines the display order of the positioning elements of the same stack level.

Explanations

Q:

Demo address: 3.html

Think:

Confused: the IE browser seems to have default position: relative for the body element ).

Is that true?

Demo address: 4.html

Analysis:

Box1 is displayed below the body. According to the stack level rules above, if the body has a default position attribute in IE, that is, the body is its parent stacking context, and box1 should be displayed above it, this is not the case. When position: relative is added to the body, the effect is consistent with that of the stack level rule. Therefore, the body does not have the default position attribute.
Why are the positioning elements of negative values different in IE and FF?
According to the stack level rule in ie: the stack level of the positioning element with Negative z-index is higher than that of the parent stacking context (root stacking context), which is displayed above it. Therefore, box1 can be displayed in ie. Ff3.0 is consistent with the standard and can also be displayed. You can give it a try.
In ff2.0, the stack level of the positioning element with Negative z-index is lower than that of the parent stacking context (root stacking context, so it is displayed below the root stacking context. Therefore, it cannot be seen.
In addition, after adding opacity to the code above, it will be displayed in ff2.0. What is the reason for this?
Speculation: If the opacity attribute (except 1) is set for the element in Firefox, a new stacking context will be generated.
After the opacity attribute is added, box1 is displayed in ff2.0 and ff3.0box1 is in the body (which can be analyzed by yourself based on the stack level rules above.
This is also proved in w3c instructions.


In future levels of CSS, other properties may
Introduce stacking contexts, for example 'opacity'
[CSS3COLOR].

Summary:

The z-axis display sequence of elements in a stacking context is determined by the stack level of the elements. The position elements of the same stack level are further determined by the size of the z-index.
In ie, setting the position attribute for the element (except static) can generate a new stacking context
Setting the opacity attribute (except 1) for the element in ff can generate a new stacking context
In addition (other properties may also generate a new stacking context, but you still don't know), a new stacking context is generated only when the position element is set to z-index (except auto, the child element is located according to the new stacking context.