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?). ErrataWhen 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. 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.
<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. z-index: 0 creates a stacking contextNow 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. z-index: auto does not create a stacking contextSo 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
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
About MariaDB database in Linux
Table of contents About MariaDB database in Linux...
How to quickly install Nginx in Linux
Table of contents What is nginx 1. Download the r...
Teach you 10 ways to center horizontally and vertically in CSS (summary)
A must-have for interviews, you will definitely u...
Detailed steps to build the TypeScript environment and deploy it to VSCode
Table of contents TypeScript environment construc...
A brief analysis of the use of zero copy technology in Linux
This article discusses several major zero-copy te...
JS Decorator Pattern and TypeScript Decorators
Table of contents Introduction to the Decorator P...
Detailed explanation of the 8 attribute values of the background attribute (interview question)
The value of the background property in CSS backg...
Detailed usage of js array forEach instance
1. forEach() is similar to map(). It also applies...
MySql quick insert tens of millions of large data examples
In the field of data analysis, database is our go...
MySQL full backup and quick recovery methods
A simple MySQL full backup script that backs up t...
Teach you how to insert 1 million records into MySQL in 6 seconds
1. Idea It only took 6 seconds to insert 1,000,00...
How to use Font Awesome 5 in Vue development projects
Table of contents Install Dependencies Configurat...
Methods and steps to access Baidu Maps API with JavaScript
Table of contents 1. Baidu Map API Access 2. Usin...
Implementation of automatic completion of Docker commands
Preface I don't know how long this friend has...
Summary of CSS gradient effects (linear-gradient and radial-gradient)
Linear-gradient background-image: linear-gradient...