解析CSS中的position定位属性

在布局中时常会遇到一些元素重叠的需求，这个时候就需要考虑使用position定位属性，此属性规定某元素以某种特定的方式固定在某个位置上，大部分时候用以处理元素重叠的需求，而不同的定位方式则拥有不同的特性。

static（默认值）

默认值，相当于没有定位属性

relative

相对定位
拥有相对定位方式的元素，会以自身为定位参照，通过left,right,top,bottom值进行偏移，定位的0,0点分别在元素自身的四个角，此定位方式不会使元素脱离文档流，并在偏移后会保留元素原本的空间。

absolute

绝对定位
1.此定位方式规定元素以其上层拥有定位属性的元素作为定位参照，如果其父元素拥有除了默认值static以外的定位方式，则以父元素为参照，如果父元素没有定位方式，则依次往上层寻找定位元素作为参照，直到html元素。
2.绝对定位会使元素完全脱离文档流，不会撑开父容器高度，需要注意的是，与浮动元素不同，浮动元素若子元素和父元素都浮动，则子元素可以撑开父元素，而absolute一旦生效，则完全脱离文档流。
3.此定位方式使内联元素支持宽高设置，也使元素的默认宽度根据内容而定。

fixed

固定定位
固定定位的元素是以整个浏览器窗口为参照的，不受任何其他元素的影响，包括滚动条，它会永远固定在浏览器窗口。与绝对定位一样，完全脱离文档流，并使元素支持宽高大小，宽度根据内容而定。

sticky

黏性定位
1.它像是fixed与relative的结合，是一种新增的定位方式，它的参照与absolute相同，以第一个不为默认值的父级定位元素为参照和作用域。
2.拥有此定位方式的元素，当通过滚动条等事件使元素到达设置的位置时，此元素将在浏览器窗口上固定，类似于fixed，而没有到达设置的位置时，它类似于relative，不会有任何变化，需要注意的是，fixed不同，黏性定位只会作用于它的父级定位元素里，当父元素不在窗口内了，则sticky失效，而fixed是作用于窗口。

所有定位的偏移量left,right,top,bottom必须与定位方式配合使用，否则失效。

关于z-index

当定位的元素重叠时候，代码后写的元素会叠在最上层显示，而z-index则可以改变重叠元素的显示层级
不设置z-index的情况下，所有定位元素默认层级为0，z-index值越高显示层级越高。
当两个定位元素在比较层级的时候，会先跟同级元素进行比较。