Home > Article > Web Front-end > Detailed explanation of CSS z-index attribute (with image analysis)_html/css_WEB-ITnose
Detailed explanation of CSS z-index attribute (with image analysis)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:511566browse
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;"><html><head><style type="text/css">img.x{position:absolute;left:0px;top:0px;z-index:-1}</style></head><body><h1>这是一个标题</h1><img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p></body></html></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="font-size:24px;"><!DOCTYPE html><html><head> <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></head><body><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></body></html></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:
<!DOCTYPE html><html><head> <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></head><body><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></body></html> 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.