关于z-index的理解

1. 层叠的黄金准则：
1.当具有明显的层叠水平标示的时候，如识别的z-index值，在同一个层叠上下文领域，层叠水平值大的覆 盖小的；
2.当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

2 层级关系的比较
相对于同级比较，默认(position:static)情况下文档流后面的元素会覆盖前面的；对于同级元素，position不为static且z-index存在的情况下z-index为0，除此之外的浏览器z-index为auto；z-index为auto的情况下不参与层级元素的比较，由向上遍历至此z-index不为auto的元素来参与比较。

3.不同的定位不同规则

• 指定float值left/right
  行内元素也会隐形变成块元素，元素会脱离文档的普通流，向左或右浮动，直到其外边缘碰到包含框或另 一个浮动框。
• 指定position值relative
  可以相对于其在普通流中的位置偏移，原本所占的空间仍保留。
• 指定position值absolute
  行内元素也会隐形变成块元素，元素会脱离文档的普通流，相对于最近的已定位祖先元素偏移，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块偏移。
• 指定position值fixed
  元素会脱离文档的普通流，相对于浏览器窗口偏移，固定在浏览器的某个位置。
  以上四种情况下，文档中的元素都将可能被浮动/定位元素覆盖产生重叠。

4.层叠顺序

• 层叠上下文的background与border。 block。 float。 inline、inline-block。
  z-index：auto/0。 不依赖z-index的层叠上下文z-index的值为正整数。