Summary of Z-index usage in CSS style sheets

The Z-index property in CSS is used to set the stacking order of nodes, and nodes with a higher stacking order will appear in front of the nodes with lower stacking order, which is our general understanding of the Z-index attribute. At the same time, we are always unpredictable stacking order, the value of the z-index is very large and may not be able to display the node at the front. This article will use some examples to analyze the usage of z-index, and to bring you into the concept of z-index hierarchy tree.

What do you mean, z-index? In CSS2.0, the Z-index property is used to set the stacking order of elements, and elements with a higher stacking order are always in front of the elements that have a lower stacking order (the z-axis).

1. Some features of the Z-index property in CSS style sheets:

The default value for the Z-index property is 0
• Elements can have negative Z-index property values, such as Z-index:-1
Z-index property is not inheritable
z-index Properties JavaScript uses syntax: object.style.zindex= "1″
• Almost all major browsers support Z-index properties

2. How to use the Z-index property in CSS style sheet:
Style code:

The code is as follows	Copy Code
. box{ Position:absolute; left:0px; top:0px; Z-index:-1; }

Foreground effect:

Use of Z-index properties in CSS style sheets
3, CSS style sheet in the use of Z-index property considerations:
(1) Z-index is only valid for locating elements (e.g. position:relative);
(2) Z-index can only compare sibling elements. This may be a problem that everyone can easily overlook and I'm stuck here. In other words, the z-index can only be layered to show the sibling elements;
(3) Scope of Z-index: Assuming that both A and B two elements are positioned (relative positioning, absolute positioning, a relative absolute positioning can), and are sibling elements, the style is

. Boxa{z-index:4}
. Boxb{z-index:5}
So it's not hard to see that the level of element B is higher than element A, what you need to point out here is that the level of the child elements below the A element is also lower than the child elements in the B element, even if you set the child elements in the a element to z-index:9999, and the child elements in the same element B, even if the set Z-index : 1 It is still higher than the level of element A;
(4) This property does not work with a window control, such as a select object.

The above summary of Z-index is the individual through the solution of the problems encountered in the process, I hope to be able to encounter the CSS style sheet z-index problem friends have guidelines.

On the Z-index, some of the problems that are being encountered

1. There are bugs in the element hierarchy under some browsers.
2. The z-index of an element is set too large, causing it to remain obscured.
3.JavaScript dynamic computation Z-index, which leads to the control of the element coverage relation.
Hierarchy obscures the cause of the bug
1.IE6/7 's performance against Z-index is inconsistent with IE8 and above browsers.
2.position value is not static, if the Z-index property is not set, IE6/7 Z-index defaults to 0, and IE8 and above browsers z-index to auto, and zindex:auto elements do not participate in stacking precedence comparisons .

Z-index IE6/7 IE8/9 Firefox/chrome
Do not set 0 auto auto
Number Number Number number

A comparison of hierarchical relationships

Let's look at a few conclusions:

1. For sibling elements, the elements that follow the document stream will be overwritten by default (or position:static).
2. For the sibling element, the Z-index large element will overwrite the Z-index small element when the position is not static and the z-index exists, that is, the higher the Z-index priority.
3.ie6/7 under position is not static, and Z-index does not exist when Z-index is 0, in addition to the browser Z-index for auto.
Elements that are 4.z-index to auto do not participate in the comparison of hierarchical relationships, and the elements that traverse up to this point and z-index are not auto are involved in the comparison.
Based on the above 2 points, we introduce the concept of the location tree (not the official word of the world) to make a hierarchical comparison. In the context of the positioning tree, the browser, when rendering a DOM node, generates a location tree, in addition to the DOM tree, based on the positioning elements in the DOM tree (position not static).

DOM Tree (upper left), locate tree (bottom right) contrast the following figure (where the red circle on the edge indicates that the element position is not static).

It can be understood that the location tree contains all the elements in the DOM tree that position are not STAITC. Non-sibling element comparison level relationships can be compared as follows.

• Traverse the parent node of the locating tree up until 2 elements are sibling elements.
• In the final comparison, the higher-level elements will be closer to the user's display and can cover lower-level elements, according to the above conclusions

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title>untitled page</title> <style type= "Text/css" > #king_of_diamonds { position:relative; Background-color:gray; width:30px; height:30px; left:145px; top:145px; } #ace_of_diamonds { position:relative; Background-color:blue; width:300px; height:300px; left:160px; top:130px; Z-index:1; } </style> <body> <form id= "Form1" runat= "Server" > <div id= "King_of_diamonds" > A </div> <div id= "Ace_of_diamonds" > B </div> </form> </body>