前端在绘制UI界面时，总会遇到一些比较特殊的需求，例如，指定某个DIV在特定的位置，或是用户在界面进行某些操作后想要某个或某些DIV去到某个位置，这个时候，用CSS3的定位方法 position 就能快速的实现这个效果。

1、position固定定位

{
  withd: 200px;
  height: 100px;
  border: 1px solid red;
  position: fiexd;
  bottom: 0;
  left: 100px;
}

       position值为：fiexd，中文意为固定的，在这里表示固定定位，此定位的特点是能将元素从文本流脱离，不会点其他容器的位置，默认固定位置为可视区域的左上角，当设置位置left、right、bottom、top后，就会固定在可视区域生意人位置，以上面代码为例，bottom: 0;left: 100px;表示此宽为200像素，高100像素的盒子固定在底部距离左边100像素的位置。

2、position相对定位

{
  position: relative;
}

         相对于自身的定位，设置位置后，定位到想要的地方，但本来所在的位置将会空出来，也就是说，不管元素定位到哪里，都会占据原有位置，不会从文本中脱离出来。

3、position绝对定位

.div1{
  position: relative;
}
.div2{
  psoition: absolut;
}

        绝对定位 absolute 一般配合相对定位的 relative 使用，相对于父级元素的定位，脱离文本流，如上所示。

         如果不设置父级元素，则默认相对于可视区域进行定位。

        注：position 默认定位为 static，默认为没有定位，元素以正常流出现，此值个人认为没什么用，因为用了跟没用一样。

4、position层级

         在设置 position 定位后，有可能会出现多个元素定位重叠或是部分重叠的情况，那么此时就用到一个因定位而诞生的新属性 z-index 。

.div1,
.div2{
  position: fiexd;
  left: 0;
  bottom: 0;
}
.div1{
  z-index: 0;
}
.div2{
  z-index: 1;
}

         如上所示，当两个元素定位在同一个地方的时候， z-index: 0;的元素将会被 z-index: 1;的元素遮挡，我们能看到的元素就是 div2 ，如果后面相看到 div1 ，只要动态的去设置 div1 的z-index就可以。