preface

Z-index is just one of the CSS cascading rules. It only applies to the positioned elements. The reason it works is because it creates a cascading context

What is a Stacking Context

So let’s use the definition of MDN

A cascading context is the three-dimensional concept of HTML elements that extend along an imaginary Z-axis relative to the user facing a window or web page, occupying the space of the cascading context in order of priority according to their own attributes.

A cascading context is a box with many layers. Inside the box are many books (HTML elements) that are placed on different layers according to their CSS styles. So we can think of the cascading context as a large, layered container (although that’s not quite correct)

How do I generate a cascading context

This is the case that MDN says can produce a cascading context

And then let’s translate

  1. The root element of the document (HTML element)
  2. Sets z-index to absolute and relative positioning elements with non-auto values
  3. Element with position set to fixed or sticky
  4. The parent element sets display: flex and itself sets z-index to a non-auto element
  5. Opacity: element less than 1
  6. Z-index Grid layout (GIRD) child element that is not auto
  7. The mix-blending-mode attribute is not a normal element
  8. The following attributes value any element that is not None
    • transform
    • filter
    • perspective
    • clip-path
    • mask/mask-image/mask-border
  9. Isolation is the element with the ISOLATE value
  10. -webkit-overflow-scrolling for elements in touch
  11. Will-change is an element with a non-initial value
  12. Contain layout, paint, strict, content

You don’t have to write them all down, but the first six points should be enough

Let’s talk about stacking levels and stacking orders.

Before if you read the other articles, you will find that here for me and them stacking level translation is not big, actually I have been think cascade level somewhat ambiguous and is not easy to understand, so I am here using cascading ranks the translation, in fact, to be honest I don’t want to put these two nouns, because it is not necessary to rather confusing, But finally I put it up, because I think some of my friends may have read other blogs, I’m afraid I’m not used to it without these two things (cross them out).

The cascade hierarchy and cascade order are not clearly defined in the official documentation (they probably are, but I didn’t find them), they are just nouns that occasionally appear in the cascade context of the documentation, so I’ll use my own interpretation to define them

Hierarchy: Each element has a hierarchy in the context of the hierarchy that contains it. This hierarchy is called a hierarchy. When elements overlap, the higher the hierarchy is, the closer the user is, and the smaller the hierarchy will be covered

1. An element can only have one hierarchy because it can only belong to one hierarchy context, just as a book can only belong to a box 2. An element's hierarchy only works in the context of the hierarchy to which it belongs, just as a book belongs to a box, and it cannot run out of the box to sort separatelyCopy the code

Cascading order: The cascading order is a sorting rule on the Z-axis. The rules are as follows: In the same cascading context, the higher the cascading level, the closer the user is

Let’s see how many levels there are in the cascade

It’s time for the familiar lost document, which is the CSS specification 2018’s description of cascading levels

Translation:

In A cascading context A, the hierarchy is as follows (the hierarchy increases gradually) :

  1. Layer the background and border of context A
  2. In this cascading context A, an element in cascading context B with A negative z-index is generated
  3. Conventional flow non – positioning block box
  4. Non-positioning floating box
  5. Regular stream non-positioned row boxes (note that row boxes here include elements with display inline and k elements with inline-bloc)
  6. This one has three points
    • An element with a stack context and a Z-index of 0 is generated
    • Z-index is the positioning element of auto
    • Some elements that generate a stack context without setting z-index to a numeric value (mainly new to CSS3)
  7. Stack context B whose Z-index is positive

In a cascading context, the higher the level, the closer it is to the user, and if the cascading level is the same, the later elements in the source code override the previous elements

Generally speaking, it is who is bigger and who is better

Let’s look at some examples

Example a

Estimated to see so much theoretical knowledge, many people are a face meng force, we here on the synthesis, with a few examples to use the knowledge in front

HTML

<div ID ="box1"> box1: I am a stack context with z-index negative </div> <div ID ="box2"> Box2: I am a normal block box </div> <div ID ="box3"> Box3: I set float </div> <div ID ="box4"> Box4: I am a row block box </div> <div ID ="box5"> Box5: I am a position element,z-index is 0, in front of the blue box </div> <div ID ="box6"> Box6: I am the positioning element,z-index is auto </div> <div ID ="box7"> Box7: I am the positioning element,z-index is 0, after the blue box </div> <div ID ="box8"> Box8: I am a stack context with z-index positive </div>Copy the code

CSS

div
{
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    padding: 0 30px;
}

#box1
{
    background-color: orange;
    position: relative;
    z-index: -1;
    margin-top: 0px;
}

#box2
{
    background-color: yellow;
    margin-top: -60px;
}

#box3
{
    background-color: green;
    float: left;
    margin-top: -80px;
}

#box4
{
    background-color: #00bbff;
    display: inline-block;
    margin-top: 0px;
    margin-left: -150px;
}

#box6
{
    background-color: blue;
    position: relative;
    margin-top: 0px;
    top: -80px;
    z-index: auto;
}


#box5
{
    position: absolute;
    background-color: #4cae4c;
    z-index: 0;
    top: 320px;
    left: 96px;

}

#box7 {
    position: absolute;
    background-color: pink;
    z-index: 0;
    top: 320px;
    left: 328px;
}

#box8
{
    background-color: purple;
    position: relative;
    z-index: 1;
    margin-top: 0px;
    top: -140px;
}
Copy the code

The results of

In this document, there are 5 elements that generate the cascading context: HTML elements, box1, box5, box7, and box8. The HTML elements generate the stacked context with 8 elements (box1-box8), and these 8 box elements have their corresponding cascading levels (see above for details). The higher the level, the closer it is to the user, the lower the level elements are covered, and then the same level elements (such as 5,6,7) are overwritten in the order in which they were placed in the source file

Example 2

Now let’s make it harder and change the HTML file by adding a CSS element to box5 and box7

<div ID ="box1"> box1: I am a stack context with z-index negative </div> <div ID ="box2"> Box2: I am a normal block box </div> <div ID ="box3"> Box3: I set float </div> <div style="position: absolute; z-index: 2; background-color: #8a6d3b; top: 97px; left: 0px"> < span style = "box-sizing: border-box; Absolute location </div> <div > <div ID ="box6"> Box6: I am the location element,z-index is auto </div> <div ID ="box7"> Box7: I am the location element,z-index is 0, <div after the blue box style="position: absolute; z-index: -1; background-color: #FF5B17; top: 101px; </div> <div id="box8"> </div> <div id="box8"> </div>Copy the code

Then something seemingly unthinkable happened

The larger element in the z-index is below the smaller element in the z-index. Let’s analyze the wave. First, the outermost cascading context is still the HTML element, and the HTML cascading context has box1-box8. Box5 and box7 form a new cascading context, box5-1 and box7-1 form a cascading context, box5 and box7 form a cascading context, box5 and box7-1 form a cascading context, box5 and box7-1 form a cascading context, box5 and box7-1 form a cascading context, box5 and box7-1 form a cascading context. Box5-1 and Box7-1 set z-index only in the context in which they belong, and they are not in the same context at all, so z-index does not affect their coverage relationship. What affects their coverage relationship is the context in which they belong. Because box5 and box7 overwrite Box5 in HTML’s cascading context, the box7 cascading context and all the elements in its cascading context are closer to the user than the elements in the box5 cascading context, so box7-1 overwrites Box5-1

For example, the stacked context is the big box, and the elements that don’t form the stacked context are the books. In the big box of HTML, we have boxes box1, box5, box7, box8, books box2, box3,box4, and box6, They are in the order (from far to near) box1, box2, box3, box4, box5, box6, box7, box8. Box5-1 and box7-1 are inside box5 and Box7. Since box7 itself is taller than Box5, So books in Box7 are definitely taller than books in Box5, and the Z-index Settings for box5-1 and Box7-1 just make them rank higher in boxes 5 and 7 compared to other books

Let’s do a little exercise and see if we’ve got it

Now add box6-1 to box6 and set position to Absolute and z-index to 1. Which is first, box6-1 or box8?

<body> <div ID ="box1"> Box1: I am a stack context with z-index negative </div> <div ID ="box2"> Box2: I am a normal block box </div> <div ID ="box3"> box3: I am set to float </div> <div id="box4"> Box4: I am a row block box </div> <div id="box5"> Box5: I am a position element,z-index is 0, in front of the blue box <div style="position: absolute; z-index: 2; background-color: #8a6d3b; top: 235px; left: 73px;" <div style=" box-sizing: border-box; word-wrap: break-word! Important;" z-index: 1; background-color: #d9534f; top: 90px; left: 127px;" <div style="position: absolute; box-sizing: border-box; z-index: -1; background-color: #FF5B17; top: 236px; left: -44px;" </div> <div id="box8"> Box8: I am a stack context with z-index = 1 </div> </body>Copy the code

Because box6 does not form a cascading context, box6-1 is also in the cascading context formed by HTML. Box6-1 and Box8 both have a z-index of 1 and the same cascading level, and box8 overwrites Box6-1 according to the come-frod-behind rule

Afterword.

So that’s the end of my share, if I made a mistake or you have any other thoughts or questions, feel free to leave them in the comments

The test code: link: pan.baidu.com/s/1YQvBZ8Ai… Extraction code: Sena