CSS element cascade level and Z-index

Statement

Anchor element: Position property value sets elements other than the default value static, including relative,absolute,fixed.

Platform: win/ie win/ff

Z-index

Used to determine the stacking order of the positioned elements on the vertical in the display direction (hereinafter called the Z-axis)

Value: Auto | Integer | Inherit

Default: Auto

Apply to: Locate elements

Inheritance: No

Understanding Stacking Context

Each box belongs to a stacking context, which is the reference for the element to be positioned in the direction of the z axis. The root element forms the root stacking context, and the other stacking context is generated when the positioning element is set Z-index to a non auto. such as #div1{position:relative;z-index:0;} You can make ID=DIV1 elements produce stacking context. Stacking context and containing block are not necessarily linked.

Understanding Stack Level

In each box in a stacking context, there is a stack level (that is, cascading levels, which are uniformly used in the stack rank), which determines the order in which each box appears on the z-axis in the same stacking context. In the same stacking context, the stack level value is displayed on a large display, and a small display of stack level values is followed by the same stack level following the catch-all principle (Back-to-front). In different stacking contexts, the order in which elements are displayed is determined by the stack level of the parent's stacking context. Regardless of their stack level. Note that stack level and z-index are not unified concepts. (Will be in the later text to understand slowly)

Stack level rules

Each stacking context can contain block-level (chunk) elements, inline (inline inline) elements, and elements that set the float property, anchor elements, and so on, and what are their order of display in the same parent stacking context? What is the stack level? For example, if a block-level element and inline elements happen to Cascade, who will be on top? Who's in the back, who's up there?

The following stack level rules can be drawn from the description of the stack level by the Consortium

Each stacking context includes the following stack level (from behind):

Parent stacking context Background, boundary

Positional element with a negative value (the smaller the value, the lower the Z-index)

Non-positioned, block-level child elements in text flow

Non-positioned float floating child elements in text flow

As if it could produce stacking context inline elements

Otherwise, the stack level of the inline element will precede the block element.

Positioning elements of the z-index:auto/0

Z-index value is positive positioning element (greater value is higher)