Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the method of CSS cascading context in the web front end". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of CSS cascading context in the web front end".

I. phenomenon

Display sequence on Z axis / / z-index web front-end development that penetrates the parent container Learning Q-q-u-n: 731771211, share learning methods and small details that need to be paid attention to, constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)

/ / cannot penetrate the z-index of the parent container

The two pieces of code are basically the same, except that there is a z-index difference in the dark blue box. When the z-index of the parent container is auto, the red box appears behind the parent container through the parent container (obscured by the parent container). The red box cannot pass through the parent container when the z-index of the parent container is 0.

Element Z axis comparison / / element Z axis comparison

/ / element Z-axis contrast web front-end development learning Q-q-u-n: 731771211, share learning methods and small details that need to be paid attention to, and constantly update the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)

Similarly, 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 of the container box, the bottom layer of red and gray box. The difference is that the z-index of the container box in the middle has changed from auto to 0. The Z-axis level comparison of the bottom red and gray boxes is quite different. * * from the above two examples, we can find that when * z-index is numerical and takes effect, a change will occur in the container so that the child components in the container cannot pass through the container itself, and the level of the child components is determined by the parent component.

This changed container element is called a cascading context.

2. Characteristics

The cascading context has several features that can be nested, and the internal cascading context and all its child elements are subject to the external cascading context.

This is easy to understand, you can refer to example 2. When the second-tier container box is upgraded to a cascading context, the Z-axis levels of the red and gray boxes are subject to the second-tier container box.

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

This one can be used in performance optimization. Taking into account the upper stack context when updating DOM elements can make the site perform better.

When z-index is not specified in the cascading context, the cascading level is the same as zindex``: 0, which is higher than that of ordinary elements. Specify z-index according to cascading rules.

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

Third, create

Cascading context can be divided into three ways to create 1. The root element of the page is called the root cascading context 2. The traditional cascading context of positioning elements whose z-index value is numeric. Other CSS3 attributes (details can be found in hands-on experiments)

Flex item whose z-index value is not auto (parent element display:flex | inline-flex)

The opacity value of the element is not 1

The transform value of the element is not none

The filter value of the element is not none

Note: 1. Z-index: auto and z-index: 0 belong to the same level on the cascading level. But z-index: 0 conforms to the phrase "z-index is numeric" which escalates the element to a cascading context. 2. The paradox of IE6,7 is that when the z-index of an element is auto, the element is also upgraded to create a cascading context. That's why IE6/IE7 's z-index has been a big problem in the past.

Four, two concepts: cascading order, cascading level

Before talking about cascading rules, two concepts need to be understood, which is helpful for us to discuss related issues in our daily communication.

Cascading order (Stacking Order), which literally means that elements are displayed vertically on the Z axis according to specific order rules when cascading occurs.

Cascading level (Stacking Level), which is easy to understand. Cascading level is a noun that describes the cascading order of elements, which determines the order in which elements are displayed on the Z axis in the same cascading context. For example: after element An overlaps with element B, element An is on top of element B. Then we can directly say that the cascading level of element An is greater than that of element B.

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

When the cascading elements are all cascading context elements, that is, when there is an explicit z-index value (the cascading context created by CSS3 has a z-index value of 0 without an explicit z-index value), the value of z-index is directly compared, and the higher value is above the lower value element.

The cascading judgment can be made according to the following rules when the elements are in the same cascading context.

When the cascading levels of the elements are the same and the cascading order is the same, the elements that follow in the DOM flow overwrite the previous elements.

Thank you for reading, the above is the content of "what is the method of CSS cascading context in the web front end". After the study of this article, I believe you have a deeper understanding of what is the method of CSS cascading context in the web front end, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.