The difference between Z-index: 0 and Z-index: Auto in CSS

Time:2022-5-8

Recently, in the process of learning cascading context, I had a question 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?) Sorted out this note.

Corrigendum

When checking the data, we found a saying that if the Z-index is 0, a new cascading context will be created, and 0 will be on auto. The second half of the sentence is wrong. Z-index: 0 and Z-index are not set, that is, Z-index: Auto is not high or low in the same level, and the latter in the document flow will overwrite the first.

If Z-index: 0 or Z-index: Auto is set, the later ones in the document stream will overwrite the first ones.

Let’s do some small experiments

<!DOCTYPE html>
<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>

The result of this code is:

You can see that the blue element covers the red element, and the order of exchanging the red and blue element blocks in the document is


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

Can get

At this time, the red element covers the blue element. It can be concluded that the value of Z-index 0 or auto has no effect on the arrangement order of elements in the cascading context.
In addition to times, I also saw such a sentence in the MDN document:

When Z-index is not specified, all elements will be rendered on the default layer (layer 0).

That is, auto and 0 are on the same layer.
Then add a green block after the blue block to the above code.

< div class = "green" > do not set Z-index < / div >
 
.green {
  position: absolute;
  top: 160px;
  left: 160px;
  background: greenyellow;
}

At this time, the page looks like this.

Green has no Z-index value set. Generally, when the browser position is not static and Z-index is not set, Z-index is auto and Z-index is 0 under IE6 / 7.
As the last element, green covers the blue and red elements.

Z-index: 0 created cascading context

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


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

At this time, the page looks like this

The grey 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 element red. When an element generates a cascading context, the Z-index value of its child cascading context is meaningful only in the parent. The Z-index of all gray blocks only takes effect in the red block.

Z-index: Auto does not create cascading context

So now try this test element in the blue block? (the Z-index value of the blue element is auto)

You can see that the gray element is displayed on the top layer of all elements, and the Z-index value takes effect! At this time, the test element belongs to the cascading context created by the root element (in the hierarchy of cascading context, the element that does not create the cascading context is in the same cascading context as its parent. The blue block does not create the cascading context, which is the same cascading context as its parent element, that is, the root element). The red element also belongs to the cascading context created by the root element, but the red element Z-index is 0, 0 is less than 10, so the gray block is on the top.

summary

  • When the Z-index value is not set, the default is auto. The default layer is layer 0.
  • Z-index: 0 and Z-index are not defined, that is, Z-index: Auto is at the same level. The later ones in the document flow will overwrite the first ones.
  • Z-index: 0 will create cascading context Z-index: Auto will not create cascading context.

This is the end of this article about the difference between Z-index: 0 and Z-index: Auto in CSS. For more information about the difference between Z-index: 0 and Z-index: Auto, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!