Five overlapping rules for position, absolute, and relative layers in the CSS Layer

Five overlapping rules for position, absolute, and relative layers in the CSS Layer

It seems that many people are confused about why the DIV is on the upper layer and the DIV is on the lower layer. No matter how to set the Z-index, the problem cannot be resolved, as a result, you do not dare to use the stack. However, the overlapping effect of layers appears frequently in the interaction design. Therefore, we must control it and master its laws to control it.

First, we need to clarify the following concepts:

Static positioning: Position: static (default value of the position attribute ).
Dynamic Positioning: Position: relative or position: absolute or position: fixed.
Parent element: any element that contains this element.
Parent element: the parent element that directly contains the element.
Peer element: an element with a common parent element.

Note: These concepts are customized by the author and are only used in this article.

Let's take a look at these five rules:

Rule 1: When the peer element is located in the same way without the Z-index setting, the HTML is placed on the back.

Rule 2: when the same generation element is dynamically located and the Z-index value is set, the value of the Z-index value prevails.

Rule 3: The positioning methods of peer elements are different, and the dynamic positioning is on the top.

Rule 4: for non-peer elements, when any one and its ancestor elements do not have dynamic layout, HTML is placed on the back.

Rule 5: [important] non-peer elements, when any one or its parent element has a dynamic positioning, they also look up the parent element of the dynamic positioning, and compare the parent elements (or their own) with the highest level.

Case 1: No matter how big the Z-index of the child element is, the parent element is larger than the parent element.

Case 2: the parent element can also be the child element.

Scenario 1 and scenario 2 combined with expansion comparison:

Reference:
In fact, the first four points are the basis, and only the fifth point is difficult to understand. Here we will explain in detail:

<Div id = "AB" style = "position: absolute;">
<Div id = "A" style = "position: relative; Z-index: 100;">
<Div id = "a_inner1">
<Div id = "a_inner2">
<Div id = "a_inner3" style = "position: relative; Z-index: 98;">
<Div id = "a_inner4">
<Div id = "a_inner5">
</Div>
</Div>
</Div>
</Div>
</Div>
</Div>
<Div id = "B">
<Div id = "B _inner1">
<Div id = "B _inner2">
<Div id = "B _inner3" style = "position: relative; Z-index: 99;">
<Div id = "B _inner4">
</Div>
</Div>
</Div>
</Div>
</Div>
</Div>

In this example, we will compare the cascade relationship between Div # a_inner5 and Div # B _inner4.
To the next level of the parent element Div # AB that they share, the parent element Div # a_inner5 contains: div # A, div # a_inner1, div # a_inner2, div # a_inner3, the ancestor elements of Div # a_inner4; Div # B _inner4 include: div # B, div # B _inner1, div # B _inner2, div # B _inner3.
Then, we will analyze the components in the parent element with dynamic positioning: div # a_inner5, which contains the following elements: div # A, div # a_inner3; the element that contains dynamic positioning in the ancestor element of Div # B _inner4 is: div # B _inner3.
Then compare them with the highest level: div # A> # Div # B _inner3.

When the parent element is in the lower state and the child element can also be in the upper state, the comparison has nothing to do with position: static when the child element has a dynamic layout, however, the ancestor elements can be compared through the HTML position.