Original is not easy, I hope you can pay attention to us, and then easily point a praise ~~

This post was published by the Front End team blog: CSS Stacking Context

Introduction to the

In the process of web page making, the position relationship between elements, in the coordinate axis can be generally reflected as X, Y and Z axis. Most developers can intuitively understand the positioning of the X and Y axes, while the Z axis is relatively vague, or cannot fully understand the display logic of the Z axis.

Most people know that you can use the position attribute in conjunction with the Z-index attribute to solve the z-axis display problem of an element, but don’t know much about the deeper mechanism. This paper mainly introduces the concepts of cascading context, cascading hierarchy, cascading order and so on. The purpose is to clarify the internal logic of the z-axis display order of elements.

One, the phenomenon

The display order on the Z-axis

// Penetrates the z-index of the parent container<! -- 100 * 100 dark blue Block -->
  <div class="block blue" style="position: relative; z-index: auto;">
    <! -- 50 * 50 red Block -->
    <div class="small red" style="position: relative; z-index: -1;"></div>
  </div>
Copy the code

// Cannot penetrate the z-index of the parent container<! -- 100 * 100 dark blue Block -->
  <div class="block blue" style="position: relative; z-index: 0;">
    <! -- 50 * 50 red Block -->
    <div class="small red" style="position: relative; z-index: -1;"></div>
  </div>
Copy the code

The code is basically the same except for a z-index in the dark blue box. When the z-index of the parent container is auto, the red box passes through the parent container and appears behind the parent container (blocked by the parent container). When the z-index of the parent container is 0, the red box cannot pass through the parent container.

Z-axis comparison of elements

// Compare elements on the Z-axis<! -- 100 x 100 dark blue box -->
  <div class="block blue">
    <div style="position:relative; z-index:auto;">
      <! -- 50 * 50 red box -->
      <div class="small red" style="position:absolute; z-index:2;"></div>
    </div>
    <div style="position:relative; z-index:auto;">
      <! -- 50 × 50 grey box -->
      <div class="small yellow" style="position:absolute; z-index:1; top: 10px;"></div>
    </div>
  </div>
Copy the code

// Compare elements on the Z-axis<! -- 100 x 100 dark blue box -->
  <div class="block blue">
    <div style="position:relative; z-index:0;">
      <! -- 50 * 50 red box -->
      <div class="small red" style="position:absolute; z-index:2;"></div>
    </div>
    <div style="position:relative; z-index:0;">
      <! -- 50 × 50 grey box -->
      <div class="small yellow" style="position:absolute; z-index:1; top: 10px;"></div>
    </div>
  </div>
Copy the code

Again, the above two pieces of code are basically the same, with three layers of DIV boxes. The outermost layer is a dark blue box, the middle layer is a container box, the bottom layer is a red and gray box. The difference is that the z-index of the middle container box has changed from auto to 0. The red and gray boxes at the bottom have very different z-axis comparisons.

From the above two examples, we can find that whenz-indexWhen the value is valid, a change occurs in the container that makes it impossible for the children of the container to pass through the container, and the hierarchy of the children is determined by the parent. This changed container element is called the cascading context.

Second, the characteristics of

  • The cascading context has several features

    • The cascading context can be nested, and the inner cascading context and all its children are subject to the outer cascading context.

This is easy to understand. Let’s look at example 2. When the layer 2 container box is upgraded to a cascading context, the z-axis hierarchy of red and gray boxes is constrained by the layer 2 container box.

  • Each cascading context is independent of its sibling, meaning that only descendant elements need to be considered when cascading or rendering.

This can be used in performance optimization. Considering the cascading context when updating DOM elements can lead to better site performance.

  • The cascading context is not specifiedz-indexWhen, its cascade level withz-index : 0Same, higher than normal. The specifiedz-indexIn accordance with the cascade rule.

This specifically refers to the cascading context created by the CSS3 attribute, which itself does not specify z-index. The cascade level should be Z-index: 0.

Three, create,

  • There are roughly three ways to create a cascading context

    • The page root element is called the root cascade context

    • The traditional cascading context of a positioned element whose z-index value is a numeric value

Note:

1, z-index: auto and z-index: 0 belong to the same level in the hierarchy. Z-index: 0, however, conforms to the clause “Z-index is numeric” and causes the element to be upgraded to a cascading context. There is an anomaly in IE6 and ie7 that when the element’s Z-index is auto, the element is also upgraded to create a cascading context. This is why THE IE6/IE7 Z-index has been a big problem in the past. Fortunately, you can now forget about these two old browsers.

  • Other CSS3 properties (details available in hands-on experiments)

    • z-indexValues are not forauto 的 flexItem (parent elementdisplay : flex | inline-flex )
    • Elements of theopacityValue is not1
    • Elements of thetransformValue is notnone
    • Elements of thefilterValue is notnone
    • other

Four, two concepts, cascade order, cascade level

Before we talk about the cascading rule, we need to understand two concepts, which can help us discuss related issues in daily communication.

  • The elements are stacked vertically on the Z axis in accordance with a specific Order rule. This is literally Stacking Order.
  • Stacking levels, this is easy to understand. A hierarchy is a noun that describes the order in which elements are stacked. It determines the z-axis display order of elements in the same hierarchy context. For example, when element A and element B overlap, element A is on top of element B. So we can just say that the hierarchy of element A is greater than the hierarchy of element B.

Five, the cascade rule

When elements are stacked on top of each other, the display rules are as follows.

  • When the elements that are stacked with each other are the elements of the cascading context, that is, the z-index value is clear (the cascading context that does not have the explicit Z-index value is 0, that is, the cascading context created by CSS3 has the z-index value), the z-index value is directly compared, and the element with the larger value is above the element with the smaller value.

  • When elements are in the same cascading context, the following rules can be used for cascading judgment.

  • When elements are cascaded at the same level and in the same order, the later elements in the DOM flow overwrite the earlier ones.

Six, recruit talent

Recruitment, front-end, belonging to the ZooTeam, more than 50 partners are waiting for you to join the wave. If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the growth of a front end team that has deep business understanding, technology systems, value creation, and impact spillover as the business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

7. Refer to the article

  • In-depth understanding of cascading context and cascading order in CSS

  • Cascading context

  • Thoroughly understand CSS cascading context, cascading hierarchy, cascading order, and Z-index