Because we intuitively think that HTML web pages are two-dimensional, because text, images or other elements are arranged in order. However, the actual web page is three-dimensional, and stacking (overlapping) may occur between elements. This can be done through CSS. The z-index property sets the stacking order of elements.
1. The meaning of z-index attribute
The stacking order of an element in the document, used to confirm the stacking level of the element in the current stacking context. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.
(1) The higher the z-index attribute value, the higher it is.
(2) Elements can have negative z-index attribute values.
(3) z-index and specific numbers.
(4) The value of z-index does not follow the unit.
As shown below:
As shown in the figure above, the name of this property is derived from the coordinate system, where the x-axis is from left to right and the y-axis is from top to bottom. From screen to user is the z-axis. In this coordinate system, elements with a higher z-index value are closer to the user than elements with a lower z-index value. That is to say, elements with a higher z-index value are first displayed in the user's field of vision, which results in a longer Elements with high z-index values cover other elements, which is also called stacking or stacking.
You can create more complex web page layouts through the z-index attribute. The optional values of the z-index attribute are as shown in the following table:
There are the following points to note regarding the hierarchical relationship of elements:
(1) For elements whose position attribute is not set or when the value of the position attribute is static, the later-defined element will overwrite the previous element;
(2) For elements that have a position attribute set and the attribute value is not static, these elements will overwrite elements that do not have a position attribute set or whose position attribute value is static;
(3) For elements whose position attribute value is not static and which has a z-index attribute defined, elements with a larger z-index attribute value will overwrite elements with a smaller z-index attribute value, that is, the larger the z-index attribute value, the higher the priority. High, if the z-index attribute values are the same, the later defined elements will overwrite the previously defined elements;
(4) The z-index attribute is only effective when the element defines the position attribute and the attribute value is not static.
2.z-index application case
Example:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; font-size:50px;line-height: 200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head><body><!--Z-index cascading Sexual principles: 1. Elements at the same level (or position:static) by default will overwrite the previous elements in the document flow. (Coming from behind) 2. For elements of the same level, if the position is not static and z-index exists, the element with a larger z-index will cover the element with a smaller z-index, that is, the larger the z-index, the higher the priority. --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color: blue;z-index:-1;>C</div></body></html>Running results:
Some misunderstandings about z-index
Generally we will say that the z-index attribute only works when used with positioned elements (elements whose position is not static). First of all, this statement is wrong, because in CSS3, the child elements of the flex box can also be used. Set the z-index attribute.