In fact, when rendering a page, the rendering process is broken down a little bit, and there is a process of layering according to the cascading context. So what is a cascading context?

Dom element z-axis judgment order

Within the same context: Z-index > 0 → Z-index :0, Z-index: Auto → Inline /inline-block box →float →block block-level box → Z-index <0

How do I generate a cascading context

1. The root element in HTML HTML itself has a cascading context, called the root cascading context

2. The position attribute of a common element is not static and the Z-index attribute is set to generate a cascading context

3. Css3’s new properties also create a cascading context

example

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style>.box1,.box2 {width: 100px; height: 100px; position: relative; } .box1 { z-index: 2; } .box2 { z-index: 1; } .a, .b, .c { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: blue; z-index: 100; } .b { background-color: green; top: 20px; left: 20px; z-index: 200; } .c { background-color: red; top: -20px; left: 40px; z-index: 9999; } </style> </head> <body> <div class="box1"> <div class="a">a</div> <div class="b">b</div> </div> <div class="box2"> <div class="c">c</div> </div> </body> </html>Copy the code

C has a z-index of 9999, but box1 has a higher hierarchy than box2, so C is below A and B.

Record the record!