Understand z-index in depth

The definition in MDN is that the Z-index attribute sets a z-order for locating an element and its descendants or flex items. When elements overlap, the larger z-index element will overwrite the smaller element in the upper layer display.

However, this explanation is too vague. When z-index does not take effect, I do not know why. Recently, I have checked a lot of materials related to Z-index and decided to systematically comb out z-index related knowledge.

I used to think that the hierarchy of elements on the Z axis depended only on the size of the z-index. The elements with higher values were displayed at the top and the elements with lower values were displayed at the bottom, but z-index didn’t work because box1 had a higher z-index than Box2.

In fact, z-index does not apply to all elements. It only applies to positioned elements whose prosition property is not static:

Determining the order of elements in the Z-axis depends on two things: the context in which the elements are stacked, and the level at which the elements themselves are stacked. Here are two concepts:

z-index

In general, HTML pages can be considered two-dimensional because text, images, and other elements are arranged on the page without overlapping. In this case, there is only one render process and all elements know how much space is taken up by other elements.

In CSS 2.1, all box model elements are in a three-dimensional coordinate system. In addition to the usual horizontal and vertical coordinates, box model elements can be stacked along the “Z-axis”, where the z-axis order becomes important when they cover each other. This means that CSS allows you to stack box model elements on top of existing rendering engines. All layers can use an integer (z-order) to indicate the position of the current layer on the Z-axis. The higher the number, the closer the element is to the observer. The z-axis order is specified using the Z-index property of the CSS. The default value of z-index is auto. The value can be a positive or negative integer

Cascading context

Definition on MDN: We assume that the user is facing a window or web page and that the cascading context is a THREE-DIMENSIONAL representation of HTML elements laid out along an imaginary Z-axis relative to the user. All HTML elements occupy this space in order of priority based on their element attributes.

So how do you create a cascading context? I’ve seen a summary on the web that’s easy to remember: there are three ways to create a cascading context

  • The element itself can be created
  • Need to combinez-indexTo create
  • Don’t needz-indexI can create it

The element itself forms a cascading context

The document root element (< HTML >) automatically forms a cascading context without any additional attributes

Need to cooperate with the Z-index to trigger the creation of a cascading context

Elements whose position value is absolute or relative and whose Z-index attribute is not auto;

Flex layout the child elements of the container, and the child element z-index value is not auto;

Do not create a cascading context with z-index

An element whose position value is fixed or sticky;

An element whose opacity property does not have a value of 1

Converts elements whose transform property value is not None

Filter element whose attribute value is not None

The above list is some commonly used attributes, of course, there are other attribute value Settings can trigger elements to form a cascading context, here is not a list, interested students can go to the MDN document to check. A few things to note here:

  • A cascading context can be included in other cascading contexts due to the root elementHTMLIs itself a cascading context, so any cascading context created in a page document isHTMLA child of the element hierarchy
  • When an element has a cascading context, it and its descendants should be considered as a whole to determine the cascading order
  • Both parent and sibling elements may be in the same cascading context

Cascading level

Without considering the context of the cascade, the level of the element is the basis for determining how the element will appear on the Z-axis when the cascade occurs. The following is the famous seven-level diagram of the cascade:

According to the figure above, we can see that the level of the element itself depends not only on the size of the z-index attribute; From bottom to top are background/border, negative Z-index element, block-level element, floating element, inline/inline block element, z-index 0 element, and positive Z-index element.

A text node is also considered an inline element

Judge the cascade order

In understanding the concept of context and the cascade element cascade level, we can now tell me something about the elements on the Z axis of the cascading order what is going on: the elements on the Z axis of the cascading order depends on two aspects: the element’s context, the cascade element’s own level of cascade, if put aside cascading context to determine the cascading order elements on the Z axis is a rampage

1. When two elements to be compared are in the same cascading context, the element is overwritten by its own cascading level, if the levels are the same

  • Sibling elements in the same cascading context

    Above, box1 and box2 are both in the same cascading context (the context formed by HTML elements), and both are inline block elements of the same level, so the latter overwrites the former

    Above, box1 and box2 are also in the same cascading context (the context formed by HTML elements), but box1 is an inline element and box2 is a block-level element. Depending on the level of the element, the inline element is higher than the block-level element, so box1 is displayed above Box2. However, there is a strange phenomenon that Box1 can only overwrite box2’s background, but not the font……. inside Box2 Why? The text node is also considered an inline element, and box1 cannot overwrite the text node inside box2 because the inline element is at a higher level than background/border.

  • Parent elements in the same cascading context

    It is also possible that the parent and child elements appear in the same context. In fact, the font example above can be regarded as the parent and child elements in the same context, so there is no other example here

2. If the two elements to be compared are not in the same parent context, you need to look up the common and closest context of the two elements, and then judge according to Rule 1

Take a look at this example I moved from MDN: Each div element creates its own layer of context. The layer of context is Root(div1, div2, div3(div4, div5, div6)). Let’s start with the hierarchy context created by div3:

  • Because div4, div5, and div6 are in the same cascade context that Div3 created, they can be directly compared in terms of the cascade level

    Since all three elements have positioning attributes, they can be judged directly according to the size of z-index value. The order on the Z axis is div4> DIV6 >div5

  • Because div1, div2, and div3 are in the same cascade context that the root element was created in, they can be directly compared in terms of the cascade level

    As above, judge directly according to the size of z-index value; The order on the Z axis is div1> DIV3 >div2

So the final sequence of elements on the page’s Z-axis is div1>div3>div2> Div4 >div6>div5

We can also verify it according to the above results: If you want to compare two elements (div2, div6) that are not in the same parent context (HTML), you need to look up the ancestor elements (div2, div3) of the two elements (HTML), and then judge according to the sequence of the ancestor elements (div2, div3) of each other

Refer to the article

  1. Cascading context -MDN

  2. Understand the Z-index property of the CSS