Recently, I encountered a problem in the process of the project. Menu-bar wanted to be displayed at the top all the time, while the following elements were displayed under it. Setting z-index at that time did not work, I don’t know why, so I looked for CSS information about cascading and solved this problem

The screen is a two-dimensional plane, but HTML elements are arranged in a three-dimensional coordinate system. X is the horizontal position, Y is the vertical position, and Z is the position of the screen from inside to outside. We look at the screen from outside to inside along the Z-axis. In this way, elements form a cascading relationship from the user’s perspective, where one element may or may not be overlaid by another;

So there are a few important concepts: Stacking Context (Stacking Context), Stacking Level (Stacking Level, Stacking Level), Stacking Order (Stacking Order, Stacking Order), Z-index

Statement:

  1. The following positioning elements refer toposition: absolute|fixed|relative|sticky
  2. The following non-positioned elements refer toposition: initial|static
  3. A similar concept of cascading Context is Block Formatting Context (BFC). Refer to the important BFC in CSS, which also introduces document flow.
  4. This article is quite long, but if you have the courage to read it, you should have a basic grasp of the concept of cascading (~ o ~ ▽ ~)

If you are interested, you can join the wechat group at the end of the article and discuss with us

1. Stacking Context

Stacking Context, Stacking Context, is a three-dimensional concept in HTML. In THE CSS2.1 specification, the position of each element is three-dimensional. When an element is stacked, it may cover or be covered by other elements. The higher up the z axis, the closer it is to the viewer on the screen

The article “Things You Didn’t know about Z-Index” has a good metaphor, which is quoted here;

Imagine a table with a bunch of objects on it, and the table represents a cascading context. If there is a second table next to the first table, the second table represents another cascading context.

Now imagine that on the first table there are four little squares, and they all sit directly on the table. On top of these four squares is a piece of glass, and on the piece of glass is a plate of fruit. The squares, the glass, the fruit bowl, each represent a different layer in the layered context, which is the table.

Each web page has a default cascading context. The root of this cascading context (table) is < HTML >
. Everything in the HTML tag is placed on a layer of this default cascading context (the item is placed on the table).

When you give a positioning element a Z-index value other than Auto, you create a new cascading context with separate cascading contexts and cascading layers on the page, which is the equivalent of bringing another table into the room.

Stacking Context 1 is formed by the document root element, and both Stacking Context 2 and 3 (Stacking Context 2, 3) are layers on top of Stacking Context 1. Each of them also forms a new cascade context, which contains the new cascade.

In the cascading context, the child elements are cascaded according to the rules explained above. Ways to form a cascading context are:

  • The root element<html></html>
  • positionA value ofabsolute | relativeAnd,z-indexValues are not forauto
  • positionA value offixed | sticky
  • z-indexValues are not forautoThe flex element of the: parent elementdisplay: flex | inline-flex
  • opacityAttribute value less than1The elements of the
  • transformAttribute value is notnoneThe elements of the
  • mix-blend-modeAttribute value is notnormalThe elements of the
  • filter,perspective,clip-path,mask,mask-image,mask-border,motion-pathValues are not fornoneThe elements of the
  • perspectiveValues are not fornoneThe elements of the
  • isolationProperty is set toisolateThe elements of the
  • will-changeSpecify any CSS properties in the CSS, even if you don’t specify their values directly
  • -webkit-overflow-scrollingProperty settouchThe elements of the

Conclusion:

  1. A cascading context can be contained within other cascading contexts and together form a hierarchical cascading context
  2. Each cascade context is completely independent of its siblings, and only child elements are considered when cascading, similar to BFC
  3. Each cascade context is self-contained: when the contents of an element are cascaded, the entire element is cascaded sequentially in the parent cascade context

2. Stacking Level

The hierarchy (Stacking Level, Stacking Level) determines the concept of the display order of elements in the same cascading context on the Z-axis;

  • The hierarchy precedence of ordinary elements is determined by the context in which they are placed
  • Comparisons of cascade levels are meaningful only within the same cascade context element
  • Within the same cascade context, the cascade hierarchy description defines the z-axis order of the elements in that cascade context above and below

Note that the hierarchy is not necessarily determined by the z-index. Only the hierarchy of the positioning elements is determined by the Z-index. The hierarchy of other types of elements is determined by the hierarchy order, the order in which they appear in HTML, and the hierarchy of the elements above their parent.

3. z-index

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.

— CSS 2.1 Section 9.9.1 – Layered presentation

Z-index applies only to positioned elements and is invalid for non-positioned elements. It can be set to a positive integer, a negative integer, 0, or auto. If a positioned element has no z-index set, the default value is auto.

The z-index value of an element is meaningful only in the same cascading context. If the parent context is lower than the other context, it does not matter how high its Z-index is set. So if you encounter a z-index value that is too large and doesn’t work, check to see if its parent cascade context is overwritten by another cascade context.

4. Stacking Order

A cascading Order (Stacking Order, Stacking Order, Stacking Order) describes the ordering rules of elements in the same cascading context, starting at the bottom of the cascade, with seven Stacking orders:

  1. Background and borders: The background and borders of the elements that form the cascading context.
  2. Negative Z-index value: the positioning child element with negative Z-index value in the cascading context, the greater the negative value, the lower the cascading level;
  3. Block-level box: block-level, non-positioned child element in a document flow;
  4. Float box: unpositioned float element;
  5. Inline box: inline, non-positioned child element in a document flow;
  6. Z-index: 0: positioning elements whose Z-index is 0 or auto, which form a new cascading context;
  7. Positive Z-index value: Z-index is a positive positioning element, and the larger the positive value is, the higher the cascade level is.

Elements in the same cascading order are stacked in the order they appear in HTML; The elements of the seventh order appear above the elements of the previous order, which appears to cover the elements of the lower order:

5. Actual combat

5.1 Common Conditions

The three relative divs each have a different color span. Red, span. Green, and span.

See Codepen – common case

So when no element contains the z-index attribute, the elements in this example are stacked in the following order (from bottom to top) :

  1. Background and boundary of the root element
  2. Block-level non-positioned elements are stacked in the order they appear in HTML
  3. The inline non-positioned elements are stacked in the order they appear in HTML
  4. The positioning elements are stacked in the order they appear in the HTML

Red, green and blue all belong to the positioning elements whose Z-index is auto, so they all belong to the sixth level of the cascade order according to the 7 cascade order rule, so they are stacked according to the sequence in HTML: red -> green -> blue

5.2 The case within the parent element of the same cascading context

The red and green are in a div.first-box and the blue are in div. Second-box. The red, green and blue are both set to position: Absolute, first-box and second-box are set to position: relative.

See Codepen – Different parent elements but all under the root element

In this example, the red, blue and green elements’ parents, first-box and second-box, do not generate a new cascading context. They are both elements in the root cascading context and are at level 6 of the cascading order, so they are stacked in the order shown in HTML: red -> green -> blue

5.3 Add z-index to child elements

The red and green are in a div.first-box, the blue and yellow are in div. Second-box, and the red, green and blue are both set to position: Absolute. If z-index: 1 is applied to the green, the green is at the top.

If you add a span. Gold to.green in the second box and set z-index: -1, it will be below the red, green and blue;

See Codepen – Set z-index

In this example, the red, blue, green and yellow elements have no new cascading context generated in their parent elements, which are elements in the root cascading context

  1. Red and blue are not set to z-index, both belong to the 6th level of the cascade order, according to the order in HTML cascade;
  2. Green sets a positive Z-index, which is level 7;
  3. Yellow sets a negative z-index, which is level 2;

So in this example, the order from bottom to top is yellow -> red -> blue -> green

5.4 Situations within parent elements in different cascading contexts

The green is in a div.first-box, the blue is in div. Second-box, and the red, green and blue are both set to position: Absolute: If the z-index of the first-box is larger than that of the second-box, the blue is below the red and green no matter how big the z-index of the blue is set to z-index: 999. If we only change the z-index values of red and green, since both elements are in the cascading context generated by the parent element first-box, then who has the highest z-index value and who is on top;

See Codepen – parent element for different cascading contexts

In this example, red, green and blue are positioned elements with z-index set, but their parent element creates a new cascading context;

  1. The parent of red and greenfirst-boxIs a position element with a positive Z-index set, so a cascading context is created, which is level 7 in the cascading sequence.
  2. The parent of bluesecond-boxA cascading context is also created, which is level 6 in the cascading sequence.
  3. In cascading order,first-boxAll the elements in thesecond-boxOn;
  4. Both red and green belong to the cascading contextfirst-boxAnd set different positive Z-index, all belong to the cascade order of level 7;
  5. Blue belongs to the cascading contextsecond-box, and set a large positive Z-index, which belongs to level 7 of the cascading elements;
  6. Although the blue z-index is big, but becausesecond-boxOf the cascade level ratiofirst-boxSmall, therefore under red and green;

So in this example, the order of display is blue -> red -> green

(The situation I encountered is similar to this example.)

5.5 Setting opacity for the child element

The red and green are in div. First-box, and the blue are in div. Second-box, and both are set to position: Absolute, and the green is set to z-index: 1, so the green is at the top of the red and blue.

If opacity:.99 is set for first-box at this time, no matter how large the z-index of red and green is set to z-index: 999, blue is located above red and green;

If you add span. Gold to.green under.second-box and set z-index: -1, it will be below red, green and blue.

See effects of codepen-opacity

Setting opacity also creates a cascading context, so:

  1. first-boxSet upopacity.first-boxBecomes a new cascading context;
  2. second-boxNo new cascading context is formed, so the elements belong to the root cascading context;
  3. Yellow is level 2 in the cascade order, red and green are level 7,first-boxAt level 6, blue is level 6 in the cascading order and is located in the order in which HTML appearsfirst-boxAbove;

So in this example, the order of display is yellow -> red -> green -> blue

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference:

  1. Z-index that you didn’t know about
  2. MDN – z-index
  3. What No One Told You About Z-Index
  4. Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and Z-index
  5. Front-end performance optimization for smoother animations
  6. Things you didn’t know about the Z-Index
  7. Talk about cascading concepts in CSS

Recommended reading:

  1. Important BFC in the CSS

PS: Welcome to pay attention to my official account [front-end afternoon tea], come on together

In addition, you can join the “front-end afternoon tea Exchange Group” wechat group, long press to identify the following TWO-DIMENSIONAL code to add my friend, remarks add group, I pull you into the group ~