- Element-level masking in some browsers has bugs;
- An element z-index is too large to be overwritten;
- 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:
- By default (or position: static), the elements following the document stream overwrite the previous one;
- 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;
- 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.
- 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:
- Traverse the parent node of the positioning tree up until the two elements are the same level.
- 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:
- C> (B & B *)> (a & a *) That is, all positioning element levels of element c and c are higher than those of a and B.
- 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