Recently, I was learning the cascading context. I had some questions about the difference between z-index 0 and AUTO, so I went to Baidu to check the information. Found some problems, combined with their own practice (experiment?) Put together this note.

errata

There is a saying that z-index 0 will create a new cascading context, 0 will be above Auto. Z-index: 0 and z-index: auto are not set. Z-index: 0 and z-index: auto are not set. Z-index: auto is not set at the same level.

Set up thez-index: 0orz-index: autoIn the document stream, what comes last overwrites what comes first.

Let’s do a little experiment

<! DOCTYPEhtml>
<html>
<head>
  <title>Z-index is 0 or auto</title>
  <style>
    .red..blue{
      width: 200px;
      height: 200px;
    }

    .red {
      position: absolute;
      z-index: 0;
      top: 100px;
      left: 100px;
      background: #FF0000;
    }
    .blue {
      position: absolute;
      z-index: auto;
      top: 40px;
      left: 40px;
      background: #0000FF;
    }
  </style>
</head>

<body>
  <div class="red">
    index-0
  </div>
  <div class="blue">index-auto</div>
</body>
</html>
Copy the code

The result of this code is:



You can see that the blue element is overlaid on top of the red element, and the red and blue element blocks are swapped in the document in the order of

<div class="blue">index-auto</div>
<div class="red">
  index-0
</div>
Copy the code

You can get



The red element is then overlaid with the blue element.It can be concluded that the z-index value of 0 or auto has no effect on the order of elements in the cascading context.

In addition, I also read this sentence in the MDN document:

  • When z-index is not specified, all elements will be rendered at the default layer (layer 0).

So auto and 0 are on the same level.

Let’s add a new green block to the above code.

<div class="green">Don't set the z - index</div>
Copy the code
.green {
  position: absolute;
  top: 160px;
  left: 160px;
  background: greenyellow;
}
Copy the code

So the page looks like this.



Green Z-index is not set. When the browser position is not static and z-index is not set, the z-index is auto, and the Z-index is 0 in Internet Explorer 6/7.

Green is the last element to appear, covering both blue and red.

z-index: 0The cascading context is created

Now let’s verify the red element because z-index:0 creates a cascading context. Add a test element to the red element

<div class="test"></div>
Copy the code
.test {
  width: 140px;
  height: 140px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: grey;
  z-index: 10;
}
Copy the code

This is what the page looks like

The gray test block is covered with blue and green blocks.

Obviously, even if the Z-index of the test element is 10, it cannot be displayed at the top of the cascading context. Because test belongs to the cascading context created by its parent, Red. When an element produces a cascading context, the z-index value of its child’s cascading context is meaningful only in the parent. The Z-index of all gray blocks only applies to red blocks.

z-index: autoDo not create a cascading context

Now what about putting this test element inside the blue block and trying it out? (The z-index of the blue element is auto)

You can see that the grey element is displayed at the top of all the elements, and the z-index value is in effect! At this point, the test element belongs to the cascading context created by the root element. (In the cascading context hierarchy, the element that did not create the cascading context is in the same cascading context as its parent. The blue block does not create a cascading context and is the same cascading context as its parent, the root element. The red element also belongs to the cascading context created by the root element, but the red element’s Z-index is 0, and 0 is less than 10, so the gray block is on top.

conclusion

  • If z-index is not set, the default value is Auto. The default layer is layer 0.
  • z-index: 0And there’s no definition of z-index, which is justz-index: autoThere is no higher or lower level within the same hierarchy, and what comes later in the document stream overrides what comes first.
  • z-index: 0The cascading context is createdz-index: autoNo cascading context is created.