CSS Z-index Properties

　With Z-index, you can change the order in which elements overlap, and elements with higher z-index values are closer to the reader than elements with lower z-index values. This means that elements with higher z-index values will overwrite other elements.

　　① If you do not set the Position property on a node, the node behind the document flow overwrites the previous node. Like what

<id= "a">a</div><  ID= "B">b</div>

　　

　　

② If position is set to relative,absolute or fixed, the node overrides the node

without setting the Position property value or the property value to static

<id= "a">a</div><    id = "B" style = "Position:relative" > B  </ Div >

③ If all nodes define a value of position and the value is not static, and the Z-index value is not specified, the previous

is still overwritten after the document flow

   <  div  id  = "A"   style  =" position:absolute;top:0; " >  a</ div  >  <  div  id  = "B"   style  = "position:absolute;top:0;"  >  b</ div  >     

　　By ①②③, if the Z-index value is not set normally, the node behind the document flow is higher than the node level in front of the document flow, setting the value of position (relative/absolute/fixed) Node is higher than the node level that does not have a position value set or a value of static. Like what:

<DivID= "a">    <DivID= "A-1"style= "position:relative;">A-1</Div></Div><DivID= "B">B</Div>

b After the document flow A, all B will overwrite a, and A-1 will overwrite B because it sets the value of position.

　　The Z-index property is used on nodes that do not use the Position property, and Z-index does not change the stacking order. So to use Z-index to change the order of stacking, there must be a position attribute on the node.

The value of Z-index can take negative, 0, positive, auto. So when does the value of Z-index be auto? For nodes that use the Position property but do not have a value of Z-index, in Ie6/7, Z-index defaults to 0, while the other browsers default to auto. The difference between Z-index 0 and auto is that nodes with Z-index 0 are involved in hierarchical comparisons, while nodes z-index to auto do not participate in hierarchical relationship comparisons.

　　④ All nodes use the Position property (relative/absolute/fixed), the node with the Z-index of 0 and the node with the Z-index Auto have no high or low points at the same level. Nodes with z-index greater than or equal to 1 are higher than Z-index 0 or auto, and nodes with negative z-index are less than Z-index 0 or auto.

<DivID= "a"style= "Position:absolute;z-index:2;">A</Div><DivID= "B"style= "position:absolute;z-index:0">B</Div><DivID= "C"style= "Position:absolute;">C</Div><DivID= "D"style= "position:absolute;z-index:-1;">D</Div>

　　C does not set the value of Z-index, so the value of Z-index is Auto,a Z-index value is greater than b,c,d, so at the top, while the value of the z-index of B is 0, although there is no high or low level in the same hierarchy, but in the document Flow C is after B, So B below C, D's Z-index is-1, so at the bottom.

　Once the Z-index ( not auto) is specified for a node, the node establishes its own local stacking context. means that all descendants of a node have their own stacking order relative to that node (specified Z-index).

　　⑤ If A/b node defines a position:absolute,a node with a z-index greater than the node, all child nodes of a node will overwrite the B node and the child nodes. Like what:

<DivID= "a"style= "Position:absolute;z-index:2">    <DivID= "A-1"style= "Position:absolute;z-index:1">A-1</Div></Div><DivID= "B"style= "Position:absolute;z-index:1">    <DivID= "B-1"style= "Position:absolute;z-index:3">B-1</Div></Div>

　　Because the z-index of a is greater than the value of the z-index of B, a will overwrite the B,a sub-nodes A-1 also overwrite B, even if the b-1 value of the child node of B Z-index is 3 greater than A-1.

When a z-index value is specified for a node and the value is not auto, the node establishes a local stacking context, which is referenced by the descendant node. However, if a node sets the value of position, but does not set the Z-index property, that is, Z-index is 0 in IE6/7 and the other browser is auto. When Z-index is auto, the node does not establish a local stacking context, so what should be done about the node's descendant nodes? This leads to the concept of a locating tree.

When a browser renders a DOM node, it generates a location tree, in addition to the DOM tree, based on the positioning elements of the DOM tree species (position not static).

⑥ determines the hierarchical relationship based on the location tree, z-index the node of auto to not participate in the comparison of the hierarchical relationship, which is traversed by the nodes up to this and z-index not auto. Like what:

<DivID= "a"style= "Position:absolute;z-index:2"><DivID= "A-1"style= "position:relative;z-index:100">A-1</Div>        </Div><DivID= "B"><DivID= "B-1"><DivID= "B-1-1"style= "POSITION:RELATIVE;Z-INDEX:10;">B-1-1</Div>    </Div>        </Div><DivID= "C"style= "Position:absolute"><DivID= "C-1"><DivID= "C-1-1"><DivID= "C-1-1-1"style= "Position:absolute;z-index:5">C-1-1-1</Div>        </Div>    </Div></Div>

In a browser other than IE6/7, the Z-index value of C is auto, so it does not participate in a hierarchical comparison, nor does it establish a cascading context for descendants, and the descendant elements look for the nearest ancestor element Z-index not auto. This level of relationship is:

• A>c>b because the z-index of a 2,c is auto, and C is behind B in the document flow, so C>b
• B-1-1>a because b-1-1 step up looking for Z-index not auto ancestor node, and finally it and a in the same cascade context, and B-1-1 Z-index is 10, so the b-1-1 level is greater than a
• A<c-1-1-1<b-1-1 because c-1-1-1 step up looking for Z-index not auto ancestor node, and finally it with a, b-1-1 in the same cascade context, and c-1-1-1 of Z-index is 5, so it is greater than a, less than b-1-1

In Ie6/7 's browser, the Z-index value of C is 0, and when Z-index is 0, it participates in the hierarchical relationship comparison, which establishes its own local cascading context. The hierarchical relationship at this point is:

• A>c>b A's Z-index for 2,c z-index is 0, so a>c
• B-1-1>a>c
• C-1-1-1<b-1-1 because the z-index of C creates its own local stacking context for 0,c<b-1-1,c, so c-1-1-1<b-1-1

Note: 1.IE6/7 position is not static, and there is no Z-index attribute, Z-index is 0, except that the browser Z-index is auto.

2.z-index for 0 will participate in hierarchical comparisons, creating a local cascading context that affects the hierarchy of child nodes. Z-index does not participate in hierarchical comparisons for auto, it does not establish a local cascading context, and the child nodes step up to find the nearest Z-index node that is not auto.

Reference article:http://www.neoease.com/css-z-index-property-and-layering-tree/comment-page-1/

http://www.neoease.com/css-z-index-dom-tree-to-layering-tree/

CSS Z-index Properties