Detailed description of css position z-index usage

1. Element-level masking in some browsers has bugs;
2. An element z-index is too large to be overwritten;
3. Js dynamically computes z-index, resulting in controllable element overwrite relationships

Causes of hierarchical coverage bug:

The performance of the z-index pairs in IE6/7 is different from that in IE8 and later browsers. If the position value is not staticDo not set the z-index attribute,In IE6/7, the default value of z-index is 0., AndThe z-index of IE8 and later browsers is autoAnd the zindex: auto element does not participate in the stack priority comparison.

Comparison of hierarchical relationships:

Let's look at the following conclusions:

1. By default (or position: static), the elements following the document stream overwrite the previous one;
2. If the position is not static and the z-index exists, the element with a large z-index will overwrite the element with a small z-index. That is, the higher the z-index, the higher the priority;
3. In IE6/7, the position is not static, and if z-index does not exist, the z-index is 0. In other browsers, the z-index is auto.
4. The element whose z-index is auto does not participate in the comparison of hierarchical relationships. The elements whose z-index is not auto are traversed up to participate in the comparison.

Based on the above two conclusions, we introduce the concept of "positioning tree" (non-w3c official vocabulary) for hierarchical comparison.

In the definition of the positioning tree, when rendering a dom node, the browser will generate a "positioning tree" based on the positioning element in the dom tree (position is not static) in addition to generating the dom tree ":
The comparison between the dom tree and the positioning tree is as follows (where a red circle on the edge indicates that the position of the element is not static ):

The positioning tree contains all the elements in the dom tree whose position is not staitc.

Compare hierarchical relationships of non-hierarchical elements as follows:

1. Traverse the parent node of the positioning tree up until the two elements are the same level.
2. Make the final comparison based on the above conclusions. The higher the level, the closer the user's display and the lower the level.

Instance 1:Assume that the position of all the marked red elements in the preceding figure is not static, and z-index = 1, according to the above comparison rules:

1. C> (B & B *)> (a & a *) That is, all positioning element levels of element c and c are higher than those of a and B.
2. M> h, g> k, d> m

Example 2:Assume that the position of a is not static and the z-index attribute does not exist. The z-index sub-element of a in the positioning tree is 1, 2, 3, 4... Other positioning elements z-index: 1:

1. conclusion 3: B> (a & a *) in IE6/7 indicates that the level of Element B is higher than that of all positioning elements in a and a. In other browsers: i> h> B> d