【HTML】碎片知识点-02

• position定位区别及z-index

position定位区别
position：absolute / fixed / relative
absolute：绝对定位，定位参照物是有定位的父节点(没有定位逐层向上查找
至body)，不受父节点padding属性影响；
fixed：固定定位，定位参照物是浏览器可视区域的左上角，即使页面滚动也
不移动；
relative：相对定位，定位参照物是父级节点(无论父节点有无定位)，如果父
节点有padding，定位起点参照物父级内容区的原始点。
当父节点为relative，子节点为absolute，那么子节点参照物为父
节点的内容区起始点(即受父节点padding影响)。

相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。

z-index
z-index仅在position属性值为relative、absolute以及fixed时有效。
1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。

1. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。

2. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。

3. z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。
   a)顺序规则：如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点。
   b)定位规则：如果将 position 设为 static，位于文档流后面的节点依然会遮盖前面的节点浮动,，所以 position:static 不会影响节点的遮盖关系。
   如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。
   c)参与规则：不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative,absolute 或者 fixed 时生效.
   d)从父规则：如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.
   e)默认值规则：如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等
   于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.