Parse the stacking order of elements in CSS

• When the z-index attribute and position attribute are not included, the stacking order of all elements is the same as that in the HTML document The order of appearance is the same. (Except for the special case of using negative margin to overlap inline elements.)

• When the element is floated, the floating block element is placed between the non-positioned block element and the positioned block element. In other words, floated elements appear above descendant block elements in normal flow and below descendant inline elements in normal flow.

• When the position attribute is added to an element, all elements with the position attribute and their sub-elements will be displayed on top of other elements without the position attribute.

• z-indexIt is only valid on elements with the position attribute set. The z-index attribute on elements without the position attribute does not take effect.

z-index attribute generates stacking context

A group of elements with a common parent element that are moved forward or backward together form a stacking context. Each stacking context has a single root element. When a new stacking context is formed on the element, all child elements in the stacking context are limited to a fixed area in the stacking order. A stacking context forms a whole, and its internal elements have relatively different stacking orders. However, when compared with other stacking contexts, they can only be moved up or down as a whole.

In layman's terms, if an element is placed at the bottom of its stacking context, there is no way to display it on top of another stacking context element with a higher level, even if it is z- index is set to infinite.

Construction rules of stacking context

• The root element of the document

• The element has the position attribute (except static attribute), and also set the z-index attribute to auto. The

• element has the opacity attribute, and the value is less than 1.

• Some new css attributes, such as filter, css-regions and other attributes that require off-screen rendering, can enable elements to form a stacking context.

• Specify position:fixed element, the technical z-index is auto

Stacking order of sub-elements within the same stacking context

From bottom to top (root < -index < index-aotu < +index < position):

1. The root element of the stacking context.

2. The position attribute is set, and the element with a negative z-index and its sub-elements, the element with a larger z-index value is placed above the smaller element, and the elements with the same attribute value Elements are stacked in the order they appear in the html.

3. There is no element with position set.

4. The position attribute is set, and the z-index attribute is auto.

5. The position attribute is set, and the z-index attribute is Positive value elements.

The situation of different stacking contexts

• Stacking contexts can embed other stacking contexts.

• Each stacking context and its statistics context are independent.

• The sub-elements in the stacking context are placed in the order mentioned above.

• The z-index of the child stacking context inside the stacking context is only meaningful in the parent stacking context.

What a profound and rarely explored area of ​​knowledge. Slowly apply and summarize it in practice!

【Related recommendations】

1. Free css online video tutorial

2. css online manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Parse the stacking order of elements in CSS. For more information, please follow other related articles on the PHP Chinese website!