A summary of some practices on Z-index

1. The element has a default level, the default Dom in the back of the element hierarchy is higher, the body and HTML seems to have a default z-index, even if not set also equivalent to the effect of the set, that its child elements regardless of the level plus or minus, are on the body and HTML.

2. When the parent element does not have a Z-index value set, the child element z-index>=0 is displayed above the parent element, and if the child element z-index< 0 is displayed below the parent element, but regardless of how small the element z-index value, it is always displayed above the body and HTML elements , and when the parent or ancestor element has the Z-index value set, it appears above the parent element regardless of the Z-index value of the child element.

3. Sibling elements Z-index in the same time, the latter in the upper, or larger people in the home. When the Z-index value is not set, it can be compared as a value of 0. If the sibling element does not have a Z-index value set, the Z-index of its first child element with the Z-index attribute can be directly compared to his sibling element, and the larger one. The cascade relationship of the respective child elements is affected only when the parent element sets the Z-index value. In short, in a peer comparison, the comparison is actually only once, that is, the first element with the Z-index value is compared, if the sibling element and its child elements are not set Z-index value, then select the topmost sibling element to compare. Subsequent elements, regardless of level, are always displayed with the father.

4. The IE6 of the wonderful, always first compare the level of the parent element, the parent element level compared to the leeward, then the sub-element level can not be too high, to fight the rhythm of the father. Testing IE7 with Multibrowser is also the effect. When the element z-index is negative, this element is under the ancestor element until it encounters an ancestor element (or body and HTML) that is not static for the first position, so that the ancestor element will prevent it from sinking and not be allowed to stoop.

About the problem of Z-index in IE6 here is not to repeat it ~

The test code below can be verified by adding the Z-index value yourself:

        <div class= "A" ><div class= "B" ></div></div><div class= "C" ><div class= "D" ></ Div></div>    

Style code:

. a{position:relative;width:300px;height:200px;border:10px black Solid;background:yellowgreen;}. b{position:absolute;width:100px;height:100px;border:5px white solid;background: #959;}. c{position:relative;width:300px;height:200px;border:10px black Solid;background: #959; top:-150px;left:80px;}. d{position:absolute;width:100px;height:100px;border:5px white Solid;background:yellowgreen;}

　　

A summary of some practices on Z-index