Datepiker popup is obscured by other Div

Recently in the project, the Datepiker pop-up box was obscured by the following Div, previously encountered such a similar problem, before directly in the style to add "z-index:1000". But now using the angular directive, on the Internet to find a lot of examples, there are direct changes to CSS, but also in the options to add Zindexoffset, so for my project does not apply.

Later view Datepiker source code, found its z-index is on its parent div based on +1. This makes it easy to see that the Z-index setting of its parent Div will not mask the problem as long as it is properly set. A detailed explanation of the z-index is attached below.

The Z-index property sets the stacking order of elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

　　

Comparison of hierarchical relationships

1. For sibling elements, the elements that follow the document flow in the default (or position:static) case will overwrite the previous.

2. For sibling elements, position is not static and Z-index exists, z-index large elements overwrite Z-index small elements, that is, the greater 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.

4. Z-index elements that are auto are not involved in the comparison of hierarchical relationships, and are represented by elements that traverse up to this and z-index not auto.

Order rules

If you do not set the Position property on a node, the node behind the document flow obscures the previous node.

<div id= "A" >a</div><div id= "B" >B</div>

Positioning rules

If position is set to static, the nodes behind the document flow will still obscure the previous node floats, so the position:static node's cloaking is not affected.

<div id= "A" style= "position:static;" >a</div><div id= "B" >B</div>

If the position is set to relative (relative positioning), absolute (absolute positioning) or fixed (stationary positioning), such nodes will overwrite nodes that do not have a position attribute set or the property value is static, indicating that the former is higher than the default level of the latter.

<div id= "A" style= "position:relative;" >a</div><div id= "B" >B</div>

In the absence of z-index attribute disturbances, we can make more complex structures based on this sequential rule and positioning rules. Here we do not set position for a and B, but A-1 for the child nodes of a position:relative . According to the order rule, B overrides a, and according to location rule a ' will overwrite B.

<div id= "A" >    <div id= "A-1" style= "position:relative;" >a-1</div></div><div id= "B" >B</div>

　　Participation rules

We tried not to position the property, but to add the Z-index property to the node. Found that Z-index did not work on the node. The Z-index property only takes effect when the position property of the node is relative, absolute, or fixed.

<div id= "A" style= "z-index:2;" >a</div><div id= "B" style= "Z-INDEX:1;" >b</div><div id= "C" style= "z-index:0;" >C</div>

<div id= "A" style= "z-index:2;" >a</div><div id= "B" style= "POSITION:RELATIVE;Z-INDEX:1;" >b</div><div id= "C" style= "position:relative;z-index:0;" >C</div>

　　Default value Rule

If all nodes have position:relative defined. A node with a z-index of 0 does not have a definition of z-index at the same level; However, nodes with z-index greater than or equal to 1 will obscure nodes that do not define z-index; A node with a negative value of z-index will be overwritten by a node that is not defined z-index.

<div id= "A" style= "position:relative;z-index:1;" >a</div><div id= "B" style= "position:relative;z-index:0;" >b</div><div id= "C" style= "position:relative;" >c</div><div id= "D" style= "position:relative;z-index:0;" >D</div>

　　From the parent rule

If A and B nodes all define position:relative, the z-index of a node is larger than the B node, then A's child node must be in front of the child node of B.

<div id= "A" style= "position:relative;z-index:1;" >    <div id= "A-1" >A-1</div></div> <div id= "B" style= "position:relative;z-index:0;" >    <div id= "B-1" >B-1</div></div>

If all nodes have position:relative defined, the z-index of the A node is as large as the B node, but because of the sequential rules, the b node is covered in front of the a node. Even if the z-index value of A's child node is larger than the child node of B, the child node of B will overwrite the child node of a.

A lot of people will z-index set up very big, 9999 what all come out, if not to consider the influence of the parent node, set too big also useless, that is insurmountable level.

Reference Blog: http://www.cnblogs.com/ForEvErNoME/p/3373641.html

Datepiker popup is obscured by other Div