CSS: Use Cascading Layers and Stacking Context

In 2021, the Chromium team announced that they will support Cascade layers in Chromium 99, a clean way to manage your CSS in layers. Cascade layers allow more explicit control of CSS style priorities to prevent style conflicts.

The following section will share simple knowledge points between cascading layers and cascading contexts. At the same time, I also want to share my thoughts on CSS. It has many attributes, and the combined effect of multiple attributes is also different. It is not enough to just know what each attribute does but to make better use of it by continually expanding the knowledge base.

CSS: How to Use Cascade layers

// dom
Color
// style .red { color: red; } div { color: blue; }

Here we can intuitively conclude that the running result of the above code snippet is 'red'. If you want to display it as 'blue', you can increase the weight of the 'blue' style, e.g. use !important.

If !important is used in many places in the project, it will inevitably increase the mental burden of maintenance. Cascading layers are designed to solve this problem, read the following code.

@layer default {
    .red { color: red; }
}
@layer reset {
    div { color: blue; }
}

In the world of CSS, there are no iron rules, only unspoken rules. Some are as expected, others are elusive. Among them, we can only master more of these unspoken rules to make them more in line with expectations.

In Chromium 99 and above, the color is found to be 'blue', behind which the browser does a lot of layout calculations to make it as expected. This is especially useful for large codebases, design systems, and when managing third-party styles in an application.

In the world of CSS, there are no iron rules, only unspoken rules. Some are as expected, others are elusive. Among them, we can only master more of these unspoken rules to make them more in line with expectations.

z-index

Let's talk about the z-index property again. It is known to raise the current element's hierarchy so that elements with higher values ​​appear at the top.

CSS Cascading Layers 1

Since .blue has a larger z-index value than .red, it is stacked on top. If you remove the z-index of .blue, it will be below .red. But occasionally there will be a case, let's see what happens below.

CSS Cascading Layers 2

The z-index value of .red-child is obviously larger, but it is not displayed at the top. To solve this mystery, you need to understand what is a stacking context, an obscure, basic CSS mechanism.

CSS: How to Use Stacking Context

Photoshop image editing software, everyone should be familiar with. Layers are one of the most basic tools in Photoshop. Layers from one layer group can be layered on top of another, which is Photoshop's strategy for stacking order.

The underlying CSS also works in a similar way. Elements are grouped into stacking contexts. When we set a z-index on an element, the value is only compared to other elements in the same context. The z-index value is not global.

By default, the <html> of an HTML document is a stacking context (layer group). However, we can create additional contexts. There are many ways to create a stacking context, such as flex, grid, etc.

But most commonly, the combination of a positioned element and a valid numeric z-index creates a stacking context for the current element, which is shared by its inner elements.

.class {
    position: relative; // absolute or fixed
    z-index: 1;
}

Explore the Rules

Now that we know what the stacking context means, let's look at the problem again from the code.

.red {
    position: absolute;
    z-index: 1;
    background: red;
}
.red-child {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
    background: green;
}
.blue {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
    background: blue;
}

Based on the rules that trigger the creation of the stacking context, we can draw the stacking context for this snippet. Combined with the relationship between Photoshop groups and layers, we will find that the z-index of the parent element .red of .red-child is smaller than that of .blue. Let's modify the above code snippet.

CSS Stacking Context 1

We just adjusted the value of .red and found that the .red-child element is displayed at the top. From this, the first conclusion can be summarized: it is not a child element that affects the weight of an element label, but the stacking context in which it is located. Let's modify the above code snippet again.

CSS Stacking Context 2

This change removes the z-index property of .red, recalls how the stacking context was created, and draws the stacking context for this snippet again. At this time, .red-child and .blue are on the same level. Then compare the z-index values, .red-child is the winner.

Combining the first conclusion, we can draw the final conclusion: it is not a parent or child element that affects the weight of an element's label, but the stacking context it is in.

In fact, in the development process, it is not the value of the z-index that is difficult to debug, but how to effectively find the stacking context in which it is located. I hope the above content will be helpful to your development.



Leave a reply



Submit