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

This article mainly introduces "how to implement css cascading context". In daily operation, I believe many people have doubts about how to implement css cascading context. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to implement css cascading context". Next, please follow the editor to study!

Cascading context element

There are several attributes that involve cascading context that are frequently used in our daily development process:

Position: absolute | fixed | relative | sticky

Z-index

Float: left | right

Transform

Cascading grade comparison

A simple hierarchical comparison without involving the nesting of grandparents and grandchildren:

Z-index:-1

0

When it comes to the cascading context of ancestral elements, it is that the cascading level of descendant elements is affected by ancestral elements.

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

Actual combat problem

In the process of visualization, there is a problem: in the process of dragging at the nested level, because there is already a hierarchical problem on the nested parent element, the grandchild element is affected by the ancestral element. when dragging, it will be overwritten by elements of "normal document flow". After a period of research, the cause of the problem is caused by different cascading contexts.

Actual combat

1. Cascading context comparison at the same level

Because there is too much code, there is no need to waste space to show it here, but directly to the result of my run. Through the picture below, we can confirm the comparison of the same level mentioned above.

two。 Comparison of cascading contexts of different position

For position, the cascading context of sibling elements is greater than that of sibling elements without using z-index. In human terms, 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 cascading levels in different cascading contexts

First of all, let's reproduce the actual combat problems mentioned above, the cascading level implementation in different cascading contexts.

The red block and the green block are two sibling elements, in which the red cascading level is higher than the green cascading level, causing the two elements in the red block to have a lower cascading level than the orange block element, but the actual effect is that the orange cascading level is lower than the other block elements.

.orange {top: 20px; left: 20px; background: purple; z-index: 10;} .orange {top: 60px; left: 60px; background: pink; z-index: 20;} .orange {top: 10px; left: 10px; background: orange; z-index: 999 At this point, the study on "how to implement the css cascading context" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.