Home > Article > Web Front-end > Detailed explanation of z-index in CSS (1)
Detailed explanation of z-index in CSS (1)
- 零下一度Original
- 2017-05-12 14:16:131534browse
In our commonly used css, z-index attribute is to set the stacking order of nodes. This is our common use of z-index attributes. understanding. At the same time, we are always vague about the concept of stacking order, which will cause some problems in our usual layout. Below I have some personal understanding of z-index in CSS. I hope it can help you. I hope you can correct me if I am wrong.
In css layout we often use some float:laft; and float:right; as well as absolute, relative, fixed;
## in positioning #Some people mistakenly believe that there is a stacking order between positioning and positioning. After testing themselves, they found that their default is no stacking order. It is just the order of tags in the html that causes everyone to misunderstand. It is thought to be caused by the stacking order between positioning and positioning. The following is an example of normal use of z-index code: The static in positioning is a standard stream, so I will not explain it herediv {
width: 100px;
height: 100px;
color: white;
float: left;
}
.div1 {
position: fixed;
background-color: red;
}
.div2 {
background-color: blue;
position: relative;
}
.div3 {
background-color: green;
position: absolute;
}
</style>
</
head
>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html> We set fixed, relative, absolute for them respectively; the background color is red, blue, green We will find that the green box of absolute will be at the top, change the label in the html code The position order can make the box appear at the top of the stack. Of course, if we want to not change the order of the html tags , then we can use the second method z-index:
When we add z-index, we should note that this style has a value; the value can also affect our stacking order. The larger the value of z-index in the style, the higher the stacking layer. Of course, we should also note that z-index does not work at all times. Only in the same style, such as stacking between positioning and positioning, The stacking order of the positioned boxes themselves is higher than the stacking order of the floating boxes. So to solve this problem at this time, we need to replace the floating boxes with positioned boxes. After setting, we can z -index to set the stacking order. The above is my personal opinion. I hope it can help everyone. I will also write some personal knowledge about the web in the future. If you have different opinions, you can feel free to express them. 【Related recommendations】1.Free css online video tutorial
2. 3.php.cn Dugu Jiujian (2)-css video tutorial
The above is the detailed content of Detailed explanation of z-index in CSS (1). For more information, please follow other related articles on the PHP Chinese website!