Most CSS properties are easy to use. Often, when you use CSS properties on elements of a markup language, the results appear immediately as you refresh the page. Other CSS properties are more complex and will only work under given circumstances.
The Z-index attribute belongs to the latter group mentioned above. Z-index undoubtedly causes confusion (compatibility) and frustration (developer psychology) more frequently than any other attribute. But the funny thing is, once you really understand Z-index, you will find that it is a very easy to use property, and will provide a powerful help in solving many layout challenges.
In this article, we’ll explain exactly what Z-index is, why it’s so poorly understood, and discuss some practical issues surrounding its use. We'll also describe some of the browser-to-browser differences you'll encounter, which are unique issues that exist in existing versions of IE and Firefox. This comprehensive perspective on the Z-index attribute will provide developers with a good foundation of confidence and powerful help when using the Z-index attribute.
What's this?
The Z-index attribute determines the stacking level of an HTML element. The stacking level of an element is relative to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher Z-index value means that the element will be closer to the top in the stacking order. This layering sequence is presented along vertical thread axes.
To give a clearer picture of how Z-index works, the image above exaggerates the visual positioning of stacked elements.
natural layering sequence
In an HTML page, the natural stacking order (that is, the order of elements on the Z-axis) is determined by many factors. The following is a list, which displays the list items in a stacking context (no suitable Chinese translation has been found yet, it should refer to the stacking environment where the stacked elements are located). These items are in this stacking context. The bottom of the environment. None of the items in this list have been assigned a Z-index attribute.
The element's background and border create a stacking context
Quote:
·Stacking contexts elements with negative values are arranged in the order of appearance (the later the level is, the higher it is)
·Block-level elements that are not positioned or floated are arranged in the order of appearance.
·Unpositioned, floating elements are arranged in the order of appearance.
·Inline elements are arranged in the order of appearance.
·The positioned elements are arranged in the order of appearance.
The Z-index property, when used correctly, changes the natural stacking order.
Of course, the stacking order of elements is not particularly obvious unless they have been positioned to overlap each other. Below, a BOX with negative margins is shown to illustrate the natural stacking sequence.
The above BOX is defined with different background and border colors, and the latter two are staggered and define a negative top margin, so we can see the natural stacking order. The gray BOX is in the first place in the mark, the blue BOX is in the second place, and the gold one is in the third place. The applied negative margins clearly indicate the fact that these elements do not have a Z-index property set; their stacking order is natural, or the default, compound rule. The phenomenon of interlacing is caused by negative margins.