How to set the level of html

Editor to share with you how to set the level of html, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In html, you can set the level of an element through the z-index attribute, which specifies the stacking order (level) of an element with the syntax "z-index: numeric;"; the higher the value, the higher the level, and the smaller the value, the lower the level.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Html setting level

Set through z-index, the default value of z-index for all elements is 0.

The z-index attribute specifies the stacking order of an element. Elements with a higher stacking order are always in front of elements with a lower stacking order.

We can control the overlay between positioning elements by setting different values through z-index. The higher the value, the higher the level, and the smaller the value, the lower the level. if the level of the positioning element is-1, it will be overwritten by ordinary unpositioned elements.

Example:

Document .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;}

The above is all the content of the article "how to set the level of html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!