Detailed explanation of CSS z-index attribute (with image analysis)_html/css_WEB-ITnose

Sometimes we use the z-index property in CSS to make some block elements more layered.

As shown below: The mouse can be placed behind the text through z-index, making the web page more layered

The code to achieve the above effect is as follows:

<span style="font-size:24px;"><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style>
<h1>这是一个标题</h1>
<img  class="x lazy" src="/static/imghwm/default1.png" data-src="/i/eg_mouse.jpg" alt="Detailed explanation of CSS z-index attribute (with image analysis)_html/css_WEB-ITnose" > <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p></span>

However, many novices who have just learned CSS are a little confused about the z-index attribute. They have clearly set the z-index attribute themselves, but they don’t see any effect when they ask why. ?

To solve this problem, you need to go to w3c and take a look at the official definition:

There is something special required here The explanation is: Z-index can only work in elements where the three positioning attributes of absolute, fixed or relative are clearly defined. If the position attribute is not defined, the z-index attribute will not work.

So Z-index can only work on positioned elements (such as position:absolute;)

Use the following code and diagram to compare:

1, the position attribute is not defined in the code

<span   style="max-width:90%">    <title>学习认识z-index</title>    <meta charset="utf-8">    <style type="text/css">        #box{            width: 1000px;            height:1000px;            border: 1px royalblue solid;        }        #box1{            background-color: red;            width: 200px;            height: 200px;            z-index: 999;        }        #box2{            background-color: yellow;            width: 200px;            height: 200px;            margin-left: 150px;            z-index: 99;        }        #box3{            background-color: green;            width: 200px;            height: 200px;            margin-left: 300px;            z-index: 9;        }    </style>
<div id="box">    <div id="box1">        <span>我的z-index为999</span>    </div>    <div id="box2">        <span>我的z-index为99</span>    </div>    <div id="box3">        <span>我的z-index为9</span>    </div>
</div></span>

The result is displayed as shown below:

From the picture above, we can see that we have clearly set the z-index attribute, but why is there no cascading effect? This is a problem that most novices will encounter. At this time, we have to go to W3C to read the rules about z-index. There is a sentence in the above W3C rules that everyone must remember: "Z-index only It can work on positioned elements (such as position:absolute;)"

Let’s add the position:absolute; attribute to the code to see the display effect:

2, the code that defines the position:absolute; attribute:

    <title>学习认识z-index</title>    <meta charset="utf-8">    <style type="text/css">        #box{            width: 1000px;            height:1000px;            border: 1px royalblue solid;        }        #box1{            background-color: red;            width: 200px;            height: 200px;            z-index: 999;            position: absolute;        }        #box2{            background-color: yellow;            width: 200px;            height: 200px;            margin-left: 150px;            z-index: 99;            position: absolute;        }        #box3{            background-color: green;            width: 200px;            height: 200px;            margin-left: 300px;            z-index: 9;            position: absolute;        }    </style><div id="box">    <div id="box1">        <span>我的z-index为999</span>    </div>    <div id="box2">        <span>我的z-index为99</span>    </div>    <div id="box3">        <span>我的z-index为9</span>    </div>
</div>

At this time we will see the cascading effect as shown below .

To sum up, I have made the following summary for your reference.

z-index attribute in CSS
1. Definition and usage
The z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.
Note: Elements can have negative z-index attribute values.
Note: Z-index can only work on positioned elements (such as position:absolute;),
Note: Z-index can only work on elements that have the three positioning attributes of absolute, fixed or relative clearly defined. In an element, if the position attribute is not defined, the z-index attribute has no effect.
2, Description
This attribute sets the position of a positioned element along the z-axis, which is defined as the axis extending vertically to the display area. If it is a positive number, it is closer to the user, and if it is a negative number, it is further away from the user.

In layman’s terms, the larger the value of z-index, the closer it is to us and the forward it will be displayed.