An in-depth analysis of cascading context in css

This article will talk about the cascading context in CSS, and compare the cascading levels through examples. I hope it will be helpful to everyone!

Some time ago, the company began to promote low-code platform business, and I was fortunate to participate in it. During this period, the cascading context of css was involved, and it caused me some trouble. In order to better implement business logic, I thought it would be better to study the cascading context of css in depth. Everyone must know that a web page is a two-dimensional space, but the content is three-dimensional. In addition to the more intuitive x and y, there is also a z-axis that is not very intuitive.

Cascading context elements

In our daily development process, there are several commonly used attributes involving cascading context:

• position: absolute | fixed | relative | sticky

• z-index

• float: left | right

• ## transform

Stacking level comparison

Without involving the nesting of ancestors and grandchildren, a simple level comparison:

z- index: -1 0

When a cascading context has been generated involving the ancestor element, it is the descendant An element's stacking level is affected by its ancestor elements.

Note: The cascading context level is a child of the HTML element level, because only certain elements create cascading contexts. It can be said that elements that do not create their own stacking context will be assimilated by the parent stacking context.

Practical Problem

During the process of visual implementation, I encountered a problem: during the drag-and-drop process of nested levels, there is already a level on the nested parent element. The problem is that the ancestor and grandchild elements are affected by the ancestor elements, and will be covered by the "normal document flow" elements when dragging. After a period of research, it was found that the problem was caused by the influence of different stacking contexts.

Practice

1. Comparison of cascading contexts at the same level

Since there is too much code, I won’t waste space here. The demonstration is carried out, and the results of my operation are directly uploaded. Through the pictures below, we can confirm the hierarchical comparison of the same levels mentioned above.

2. Comparison of stacking contexts of different positions

For position, without using z In the case of -index, the cascading context of the sibling element is greater than the cascading context of the sibling element. In human terms, it means that the cascading context of the following elements is higher than that of the previous elements.

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. Comparison of stacking levels in different stacking contexts

First, let’s reproduce it The practical issues mentioned above are the implementation of cascading levels in different cascading contexts.

The red block and the green block are two sibling elements. The red stacking level is higher than the green stacking level, resulting in the two elements in the red block even having the stacking level. Lower than the orange block element, but the net effect is that the orange stack level is lower than the other block elements.

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

Here, let me mention my solution to the above problem, which is to dynamically modify the cascading level of ancestor elements. However, I personally feel that this method needs to be studied. It is cumbersome when there are many nesting levels. If anyone has a better way, please leave a message below.

(Learning video sharing:

css video tutorial)

The above is the detailed content of An in-depth analysis of cascading context in css. For more information, please follow other related articles on the PHP Chinese website!