The difference between z-index: 0 and z-index: auto in CSS

The difference between z-index: 0 and z-index: auto in CSS

I've been learning about stacking contexts recently. During the learning process, I had questions about the difference between a z-index of 0 and auto, so I went to Baidu to look up some information. I found some problems and compiled this note based on my own practice (experiments?).

Errata

When I was looking up information, I found that there is a saying that a z-index of 0 will create a new stacking context, and 0 will be above auto. The second half of the sentence is wrong. z-index: 0 and z-index not being set, that is, z-index: auto, have no high or low distinction in the same hierarchy. The one that appears later in the document flow will overwrite the one that appears earlier.

Set z-index: 0 or z-index: auto, and the ones that appear later in the document flow will cover the ones that appear earlier.

Let's do some 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. The order of the red and blue element blocks in the document is swapped as follows:

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

Can get

At this time, the red element covers the blue element again. It can be concluded that a z-index value of 0 or auto has no effect on the order of elements in the stacking context.
In addition, I also saw this 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.
 Let’s add a green block after the blue block in the above code.

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

The page now looks like this.

The green color has no z-index value set. Generally, when the browser position is not static and the z-index is not set, the z-index is auto, and the z-index is 0 in IE6/7.
Green, as the last element to appear, covers both blue and red elements.

z-index: 0 creates a stacking context

Now let's verify that the red element has a stacking context because of z-index: 0. Add test elements in the 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 by the blue and green blocks.
Obviously, even if the z-index of the test element is 10, it cannot be displayed on the top of the stacking context. Because test belongs to the stacking context created by its parent element red. When an element creates a stacking context, the z-index values ​​of its child stacking contexts are meaningful only within the context of the parent. All z-indexes of gray blocks are only effective within red blocks.

z-index: auto does not create a stacking context

So how about putting this test element in the blue block and giving it a try? (The z-index value of the blue element is auto)

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

Summarize

  • When the z-index value is not set, the default is auto. The default layer is layer 0.
  • There is no difference between z-index: 0 and no z-index defined, that is, z-index: auto, in the same hierarchy. The one that appears later in the document flow will cover the one that appears earlier.
  • z-index: 0 creates a stacking context z-index: auto does not create a stacking 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 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Let the web page automatically call the dual-core browser's high-speed mode (Webkit)

>>:  Implementation of Nginx configuration of local image server

Recommend

Implementing WeChat tap animation effect based on CSS3 animation attribute

Seeing the recent popular WeChat tap function, I ...

GDB debugging MySQL actual combat source code compilation and installation

Download source code git clone https://github.com...

Solution to the failure of 6ull to load the Linux driver module

Table of contents 0x01 Failed to load the driver ...

Linux automatically deletes logs and example commands from n days ago

1. Delete file command: find the corresponding di...

The difference between char and varchar in MYSQL

CHAR and VARCHAR types are similar, differing pri...

MySQL database table and database partitioning strategy

First, let's talk about why we need to divide...

Nginx uses Lua+Redis to dynamically block IP

1. Background In our daily website maintenance, w...

Implementation of Docker deployment of Django+Mysql+Redis+Gunicorn+Nginx

I. Introduction Docker technology is very popular...

Summary of common MySQL function examples [aggregate functions, strings, numbers, time and date processing, etc.]

This article describes the commonly used MySQL fu...

A brief analysis of different ways to configure static IP addresses in RHEL8

While working on a Linux server, assigning static...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Web page html special symbols html special characters comparison table

Special symbols Named Entities Decimal encoding S...

Analysis of the usage of replace and regexp for regular expression replacement in MySQL

This article uses examples to illustrate the use ...

What is jQuery used for? jQuery is actually a js framework

Introduction to jQuery The jQuery library can be ...

HTML Frameset Example Code

This article introduces a framework made by Frame...