Home > Article > Web Front-end > How to set the level in html
How to set the level in html
- 青灯夜游Original
- 2021-12-14 15:35:439843browse
In HTML, you can set the level of an element through the z-index attribute. This attribute can specify the stacking order (level) of an element. The syntax is "z-index: value;"; the larger the value, The higher the level, the smaller the value, and the lower the level.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlSet the level
Set through z-index, the z-index of all elements The default value is 0.
The z-index attribute specifies the stacking order of an element. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.
We can use z-index to set different values to control the coverage between positioned elements. The larger the value, the higher the level. The smaller the value, the lower the level. If the level of the positioned element is -1, it will be overwritten by ordinary unpositioned elements.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
width: 100px;
height: 200px;
background: red;
position: absolute;
}
.two{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 50px;
z-index: 1;
}
.three{
width: 100px;
height: 300px;
background: blue;
position: absolute;
left: 30px;
z-index: -2;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Recommended tutorial: "html video tutorial"
The above is the detailed content of How to set the level in html. For more information, please follow other related articles on the PHP Chinese website!